Question Case à cocher MVC extra masquée dans les formulaires brisant la case à cocher CSS personnalisée


J'essaie de personnaliser l'apparence des cases à cocher dans mon site ASP.NET MVC, en utilisant une technique comme celle décrite ici: http://cssdeck.com/labs/css-checkbox-styles

Ils fonctionnent très bien sauf lorsqu'ils sont placés dans un formulaire. Lors de l'utilisation de la méthode @ Html.CheckBoxFor (), MVC ajoute une case supplémentaire masquée, apparemment pour s'assurer qu'une valeur est soumise au formulaire POST lorsque la case à cocher n'est pas cochée: asp.net mvc: pourquoi Html.CheckBox génère-t-il une autre entrée cachée?

Lorsque la case à cocher supplémentaire masquée est sur le formulaire, ma case à cocher personnalisée ne fonctionne pas. Je clique dessus mais ça ne bascule pas entre les états. Si je supprime la case à cocher supplémentaire cachée, cela fonctionne, mais je suppose que je vais rencontrer des problèmes pour soumettre le POST.

Voici le HTML final:

<div class="kbcheckbox">
    <input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
    <input name="UserEdit.IsApproved" type="hidden" value="false">
    <label for="UserEdit_IsApproved"></label></div>
</div>

Et voici le css que j'utilise (utilise scss)

.kbcheckbox {
    width: $checkbox_size;  
    height: $checkbox_size;
    position: relative;

    input[type="checkbox"]{
        visibility: hidden;
    }

    label {
        cursor: pointer;
        position: absolute;
        width: $checkbox_size;
        height: $checkbox_size;
        top: 0;
        left: 0;
        border-radius: $control_corner_radius;
        border: 1px solid $control_border_color;
        /*@include box-shadow(1px, 1px, 1px, 0, $control_border_color, inset);*/ 
        /*@include box-shadow(0px, 1px, 0px, $control_background);*/
        background: white;
    }

    label:after {
        opacity: 0;
        content: '';
        position: absolute;
        width: $checkbox_size * 0.62;
        height: $checkbox_size * 0.25;
        background: transparent;
        top: $checkbox_size * 0.2;
        left: $checkbox_size * 0.1;
        border: 3px solid black;
        border-top: none;
        border-right: none;

        @include transform(rotate(-45deg));
    } 

    label:hover {
        background: darken($control_background, 10%);
    }

    input[type=checkbox]:checked + label:after {
        opacity: 1;
    }
}

Des idées?


10
2018-02-01 16:04


origine


Réponses:


Utilisez ce qui suit dans votre css. Vous voulez que tous vos éléments soient modifiés.

input[type = checkbox]:checked ~ label:after {
    opacity: 1;
}

Voici la violon


2
2018-01-28 23:29



Vous pouvez résoudre ce problème en connectant un événement lorsque la case à cocher est cochée pour modifier la valeur d'un champ masqué MVC, en procédant essentiellement de la même manière sans utiliser l'assistant MVC.

@Html.HiddenFor(model => model.UserEdit.IsApproved, new { @id = "chkIsApproved" })

Voici votre HTML alors

<div class="kbcheckbox">
    <input checked="checked" data-val="true" data-val-required="The Approved field is required." id="UserEdit_IsApproved" name="UserEdit.IsApproved" type="checkbox" value="true">
    <label for="UserEdit_IsApproved"></label></div>
</div>

Ensuite, utilisez simplement jQuery pour connecter la propriété cochée au champ masqué

$('#UserEdit_IsApproved').change(function() {
    $('#chkIsApproved').val($(this).is(':checked'));        
});

Tant que le champ caché MVC est quelque part, la valeur sera envoyée au contrôleur. C'est un peu de travail supplémentaire, mais cela devrait vous donner le résultat souhaité.


1
2017-08-13 15:34



Ma solution est quelque peu pirate mais vous pouvez simplement déplacer tous les champs cachés avant les cases à cocher en utilisant jQuery

 $(".checkbox > input[type=checkbox]").each(function( key, checkbox ) {
    var hidden = $(checkbox).siblings("input[type=hidden]");
    $(hidden).insertBefore($(checkbox));
 });    

0
2017-08-08 00:48