MVC checkbox thêm ẩn trong các hình thức vi phạm tùy chỉnh css hộp kiểm

Question

Tôi cố gắng để tùy biến giao diện và cảm nhận của các hộp kiểm bên trong trang web ASP.NET MVC của tôi, sử dụng một kỹ thuật giống như một chi tiết ở đây: http://cssdeck.com/labs/css-checkbox-styles

Họ làm việc lớn trừ khi được đặt trong một biểu mẫu. Khi sử dụng phương thức @ Html.CheckBoxFor(), MVC thêm một hộp kiểm ẩn phụ, rõ ràng để đảm bảo rằng giá trị được gửi tới biểu mẫu POST khi hộp kiểm không được chọn: asp.net mvc: why is Html.CheckBox generating an additional hidden input

Khi hộp kiểm ẩn bổ sung đang bật biểu mẫu, hộp kiểm tuỳ chỉnh của tôi không hoạt động. Tôi nhấp vào nó nhưng nó không chuyển đổi giữa các tiểu bang. Nếu tôi xóa hộp kiểm ẩn phụ, thì nó hoạt động, nhưng tôi đoán tôi sẽ gặp phải các vấn đề khi gửi POST.

Đây là html thức:

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

Và đây là css Tôi đang sử dụng (dùng 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; 
    } 
} 

Bất kỳ ý tưởng?

Answer 1

Bạn có thể giải quyết vấn đề này bằng dây lên một sự kiện khi hộp kiểm được kiểm tra để thay đổi giá trị trên một lĩnh vực ẩn MVC thay vào đó, về cơ bản làm điều tương tự mà không sử dụng các helper MVC

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

Đây là của bạn HTML sau đó

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

sau đó chỉ cần sử dụng một số jQuery để dây lên thuộc tính kiểm tra với lĩnh vực ẩn

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

Chừng nào trường ẩn MVC ở đâu đó, giá trị sẽ được đăng lên bộ điều khiển. Đó là một công việc nhỏ, nhưng nó sẽ giúp bạn có được kết quả mong muốn.

Answer 2

Sử dụng các mục sau trong css của bạn. Bạn muốn tất cả các yếu tố của bạn được sửa đổi.

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

Đây là fiddle