html5 - que - materialize templates

¿Cómo hacer que la casilla de verificación materializecss funcione con @ Html.CheckBoxFor?

Question

Así que estoy teniendo un problema al tratar de implementar la casilla de verificación materializecss con @ Html.CheckBoxFor. Si ingreso exactamente:

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

funciona. Pero si pruebo esto:

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

la casilla de verificación desaparece de la página a la izquierda (el estilo de la casilla de verificación se configura a la izquierda en -99999).

¿Hay alguna otra forma en que pueda implementar CheckBoxFor que haría que materialize cooperar?

Answer 1

Intente revertir su casilla de verificación y etiquetar el orden de procesamiento ...

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

Answer 2

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..

Answer 3

Estaba teniendo el mismo problema y el orden de ChecBoxFor y LabelFor era como sugieren peter.edwards. Para mí, el problema fue causado por un elemento oculto generado por @ 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>

Lo que hice para resolver el problema fue mover el elemento oculto a la parte inferior del elemento principal:

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