MVC dodatkowo ukryte pole w formach łamiącym niestandardowych css pole

Question

Próbuję dostosować wygląd i pól wyboru w mojej strony ASP.NET MVC, przy użyciu techniki jak ten szczegółowo tutaj: http://cssdeck.com/labs/css-checkbox-styles

działają świetnie z wyjątkiem przypadków umieszczonych w formularzu. Przy wykorzystaniu metody @ Html.CheckBoxFor() MVC dodaje dodatkowy ukryty wyboru, widocznie, aby upewnić się, że wartość jest przekazywana do POST formularza, gdy pole wyboru nie jest zaznaczone: asp.net mvc: why is Html.CheckBox generating an additional hidden input

Gdy dodatkowo ukryte pole jest Formularz, moje niestandardowe pole wyboru nie działa. Klikam, ale nie przełącza między stanami. Jeśli usuniemy dodatkowe ukryte pole wyboru, to działa, ale domyślam się, że napotkasz problemy z przesłaniem POST.

Oto ostateczna html:

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

A oto css używam (używa 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; 
    } 
} 

pomysłów?

Answer 1

Można rozwiązać ten problem poprzez okablowanie się zdarzenie, gdy jest zaznaczone pole wyboru, aby zamiast zmienić wartość na zasadzie pola ukrytego MVC, w zasadzie robi to samo bez użycia pomocnika MVC

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

Oto twoja HTML następnie

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

następnie wystarczy użyć trochę jQuery drut sprawdzonej właściwość z ukrytym polem

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

Dopóki ukryte pole MVC jest gdzieś, wartość zostanie wysłana do kontrolera. To trochę dodatkowa praca, ale powinna przynieść ci oczekiwany rezultat.

Answer 2

Użyj następujących w swoim css. Chcesz, aby wszystkie twoje elementy zostały zmodyfikowane.

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

Oto fiddle