如何让 materializecss 复选框与@Html.CheckBoxFor 一起使用? [英] How to get materializecss checkbox to work with @Html.CheckBoxFor?

问题描述

所以我在尝试使用 @Html.CheckBoxFor 实现 materializecss 的复选框时遇到了问题.如果我输入准确:

So I'm having an issue trying to implement materializecss' checkbox with @Html.CheckBoxFor. If I input exactly:

<input type="checkbox" id="test5" />
<label for="test5">Red</label>

它有效.但如果我试试这个:

it works. But if I try this:

@Html.LabelFor(m => m.RememberMe, new { @class = "login-label" })
@Html.CheckBoxFor(m => m.RememberMe, new { @type = "checkbox" })

复选框从页面左侧消失(复选框的样式将其左侧设置为 -99999).

the checkbox disappears way off the page to the left (the style of the checkbox gets its left set to -99999).

有没有其他方法可以实现 CheckBoxFor 使实现合作?

Is there any other way I can implement CheckBoxFor that would make materialize cooperate?

推荐答案

我遇到了同样的问题，ChecBoxFor 和 LabelFor 的顺序就像 peter.edwards 建议的那样.对我来说，问题是由@Html.CheckBoxFor 生成的隐藏元素引起的:

I Was having same problem and the order of ChecBoxFor and LabelFor were like peter.edwards suggest. For me the problem was caused by a hidden element generated by @Html.CheckBoxFor:

<input checked="checked" class="check-box" data-val="true" id="IsActive" name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">
<label for="IsActive">IsActive</label>

我为解决这个问题所做的是，将隐藏元素移动到父元素的底部:

What I did to solve the problem was, move the hidden element to the bottom of the parent element:

 $("input[type='hidden']").each(function (index, element) { 
        $(this).appendTo($(element).parent());
    });

这篇关于如何让 materializecss 复选框与@Html.CheckBoxFor 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！