所以我在尝试实现materializecss时遇到了问题。复选框@ Html.CheckBoxFor。如果我完全输入:
<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,这将使materialise合作?
答案 0 :(得分:12)
我遇到了同样的问题,ChecBoxFor和LabelFor的顺序就像peter.edwards建议的那样。对我来说,问题是由@ Html.CheckBoxFor:
生成的隐藏元素引起的wamp
我为解决问题所做的是将隐藏元素移动到父元素的底部:
<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>
答案 1 :(得分:0)
尝试撤消您的复选框并标记渲染顺序...
@Html.CheckBoxFor(m => m.RememberMe, new { @type = "checkbox" })
@Html.LabelFor(m => m.RememberMe, new { @class = "login-label" })
答案 2 :(得分:0)
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..