MVC額外隱藏復選框在窗體中打破自定義css復選框

[英]MVC extra hidden checkbox in forms breaking custom css checkbox


I am trying to customize the look and feel of the checkboxes in my ASP.NET MVC site, using a technique like the one detailed here: http://cssdeck.com/labs/css-checkbox-styles

我正在嘗試使用類似於此處詳述的技術來自定義ASP.NET MVC站點中復選框的外觀和感覺:http://cssdeck.com/labs/css-checkbox-styles

They work great except when placed in a form. When using the @Html.CheckBoxFor() method, MVC adds an extra hidden checkbox, apparently to make sure that a value is submitted to the form POST when the checkbox is not checked: asp.net mvc: why is Html.CheckBox generating an additional hidden input

除非放在表格中,否則它們的效果很好。當使用@ Html.CheckBoxFor()方法時,MVC添加了一個額外的隱藏復選框,顯然是為了確保在未選中復選框時將值提交給表單POST:asp.net mvc:為什么Html.CheckBox生成一個額外的隱藏輸入

When the extra hidden checkbox is on the form, my custom checkbox does not work. I click it but it does not toggle between the states. If I remove the extra hidden checkbox, then it works, but I guess I'll run into problems submitting the POST.

當表單上有額外的隱藏復選框時,我的自定義復選框不起作用。我點擊它但它沒有在狀態之間切換。如果我刪除額外隱藏的復選框,那么它可以工作,但我想我會遇到提交POST的問題。

Here is the final html:

這是最終的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>

And here is the css I am using (uses scss)

這是我正在使用的CSS(使用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;
    }
}

Any ideas?

有任何想法嗎?

2 个解决方案

#1


2  

Use the following in your css. You want all your elements to be modified.

在您的CSS中使用以下內容。您希望修改所有元素。

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

Here is the fiddle

這是小提琴

#2


1  

You can solve this problem by wiring up an event when the checkbox is checked to change the value on an MVC hidden field instead, essentially doing the same thing without using the MVC helper

您可以通過在選中復選框時連接事件來解決此問題,而不是更改MVC隱藏字段上的值,基本上在不使用MVC幫助程序的情況下執行相同的操作

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

Here is your HTML then

這是你的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">
    <label for="UserEdit_IsApproved"></label></div>
</div>

Then just use some jQuery to wire up the checked property with the hidden field

然后使用一些jQuery將checked屬性與隱藏字段連接起來

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

As long as the MVC hidden field is somewhere, the value will be posted to the controller. It is a little extra work, but it should get you the result you want.

只要MVC隱藏字段在某處,該值就會發布到控制器。這是一個額外的工作,但它應該得到你想要的結果。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/02/01/730051c4987086c6ec115297b2f65157.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com