MVC casella di controllo in più nascosta in forme css personalizzato casella

Question

Sto cercando di personalizzare l'aspetto delle caselle di controllo nel mio sito ASP.NET MVC, utilizzando una tecnica simile a quella dettagliato qui di rottura: http://cssdeck.com/labs/css-checkbox-styles

grande lavoro tranne quando inserito in una forma. Quando si utilizza il metodo @ Html.CheckBoxFor(), MVC aggiunge una casella di controllo nascosta aggiuntiva, apparentemente per assicurarsi che un valore venga inviato al modulo POST quando la casella di controllo non è selezionata: asp.net mvc: why is Html.CheckBox generating an additional hidden input

Quando la casella di controllo nascosta in più è attiva il modulo, la mia casella di controllo personalizzata non funziona. Lo clicco ma non si alterna tra gli stati. Se rimuovo la casella di controllo nascosta in più, allora funziona, ma credo che incontrerò problemi nell'invio del POST.

Ecco il codice html finale:

<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> 

E qui è il CSS che sto usando (usa 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; 
    } 
} 

Tutte le idee?

Answer 1

È possibile risolvere questo problema con il cablaggio di un evento quando la casella è selezionata per modificare il valore su un campo nascosto MVC, invece, essenzialmente facendo la stessa cosa senza usare l'helper MVC

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

Ecco il vostro HTML poi

<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> 

poi basta usare un po 'di jQuery per cablare la proprietà controllata con il campo nascosto

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

Finché il campo nascosto MVC è da qualche parte, il valore verrà registrato nel controller. È un piccolo lavoro in più, ma dovrebbe darti il ​​risultato che desideri.

Answer 2

Utilizzare quanto segue nel proprio css. Vuoi che tutti i tuoi elementi siano modificati.

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

Ecco la fiddle