10

我正在尝试自定义我的 ASP.NET MVC 站点中复选框的外观和感觉，使用类似于此处详述的技术：http: //cssdeck.com/labs/css-checkbox-styles

它们工作得很好，除非放在一个表格中。当使用@Html.CheckBoxFor() 方法时，MVC 添加了一个额外的隐藏复选框，显然是为了确保在未选中复选框时将值提交给表单 POST： asp.net mvc: 为什么 Html.CheckBox 会生成一个额外的隐藏输入

当表单上有额外的隐藏复选框时，我的自定义复选框不起作用。我单击它，但它不会在状态之间切换。如果我删除额外的隐藏复选框，那么它可以工作，但我想我会在提交 POST 时遇到问题。

这是最终的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>

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

有任何想法吗？

4

3 回答 3

2

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

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

这是小提琴

于 2015-01-28T23:29:04.507 回答
1

您可以通过在选中复选框以更改 MVC 隐藏字段上的值时连接一个事件来解决此问题，本质上是在不使用 MVC 帮助器的情况下做同样的事情

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

这是你的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>

然后只需使用一些 jQuery 将选中的属性与隐藏字段连接起来

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

只要 MVC 隐藏字段在某处，该值就会发布到控制器。这是一些额外的工作，但它应该会给你你想要的结果。

于 2014-08-13T15:34:49.230 回答
0

我的解决方案有点老套，但您可以使用 jQuery 在复选框之前移动所有隐藏字段

 $(".checkbox > input[type=checkbox]").each(function( key, checkbox ) {
    var hidden = $(checkbox).siblings("input[type=hidden]");
    $(hidden).insertBefore($(checkbox));
 });
于 2018-08-08T00:48:04.663 回答