表单中的MVC额外隐藏复选框打破自定义css复选框
表单中的MVC额外隐藏复选框打破自定义css复选框
提问于 2013-02-02 00:04:14
我正在尝试使用一种类似于这里详细介绍的技术来自定义我的ASP.NET MVC站点中的复选框的外观：http://cssdeck.com/labs/css-checkbox-styles
它们工作得很好，除非放在表单中。在使用@Html.CheckBoxFor()方法时，MVC添加了一个额外的隐藏复选框，显然是为了确保在未选中该复选框时将一个值提交给表单POST：asp.net mvc: why is Html.CheckBox generating an additional hidden input
当窗体上的“额外隐藏”复选框处于选中状态时，我的自定义复选框不起作用。我单击它，但它不会在状态之间切换。如果我去掉了额外隐藏的复选框，它就会起作用，但我想我会在提交帖子时遇到问题。
下面是最终的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;
}
}有什么想法吗？
回答 3
Stack Overflow用户
发布于 2015-01-29 07:29:05
Stack Overflow用户
发布于 2014-08-13 23:34:49
您可以通过在选中复选框时连接事件来解决此问题，以更改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将checked属性与隐藏字段连接起来
$('#UserEdit_IsApproved').change(function() {
$('#chkIsApproved').val($(this).is(':checked'));
});只要MVC隐藏字段在某个地方，值就会被发送到控制器。这是一个额外的工作，但它应该会得到你想要的结果。
Stack Overflow用户
发布于 2018-08-08 08:48:05
我的解决方案有点老生常谈，但您可以使用jQuery将所有隐藏字段移到复选框之前
$(".checkbox > input[type=checkbox]").each(function( key, checkbox ) {
var hidden = $(checkbox).siblings("input[type=hidden]");
$(hidden).insertBefore($(checkbox));
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14650263
复制相关文章
相似问题