如何让 materializecss 复选框与@Html.CheckBoxFor 一起工作？

Question

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

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

有效。但如果我试试这个：

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

复选框从页面左侧消失（复选框的样式将其左侧设置为 -99999）。

有没有其他方法可以实现 CheckBoxFor 来实现实体化合作？

Answer 1

尝试颠倒复选框和标签呈现顺序...

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

Answer 2

我遇到了同样的问题，ChecBoxFor 和 LabelFor 的顺序就像 peter.edwards 建议的那样。对我来说，问题是由@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>

我解决这个问题的方法是，将隐藏元素移动到父元素的底部：

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

Answer 3

Case 1:

@Html.LableFor(x=>x.IsVpn)
@Html.CheckBoxFor(x=>x.IsVpn) (Suppose)

render like that
<lable for="IsVpn">
<input type="checkbox" name="IsVpn" value="true"/>
<input type="hidden" name="IsVpn" value="false"/>


But We Need like that For materialize css


<input type="checkbox" name="IsVpn" value="true"/>
<lable for="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

Case 2:

@Html.CheckBoxFor(x=>x.IsVpn) (Suppose)
@Html.LableFor(x=>x.IsVpn)

Now What happen:

<input type="checkbox" name="IsVpn" value="true"/>
<input type="hidden" name="IsVpn" value="false"/>
<lable name="IsVpn">

But our requirement is for materilize css :

<input type="checkbox" name="IsVpn" value="true"/>
<lable name="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

So we can't use @Html.CheckBoxFor materializ css directly

but it we can use output:

<input type="checkbox" name="IsVpn" value="true"/>
<lable name="IsVpn">
<input type="hidden" name="IsVpn" value="false"/>

it will work exactly same as checkboxfor.

But If we want razor syntax then we need to customize checkboxfor and need to make a extension..

如何让 materializecss 复选框与@Html.CheckBoxFor 一起工作？

How to get materializecss checkbox to work with @Html.CheckBoxFor?

html

materialize

razor