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

Question

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" })

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

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

do you see what reneder this code `@Html.CheckBoxFor`? – Grundy Dec 04 '15 at 17:48 — Grundy, Dec 04 '15 at 17:48
why do you use **new { @type = "checkbox" }** ? – Gane Dec 08 '15 at 14:26 — Gane, Dec 08 '15 at 14:26

score 12 · Accepted Answer · edited Jul 19 '17 at 13:42

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());
    });

score 0 · Answer 2 · answered Dec 23 '15 at 16:27

0

Try reversing your checkbox and label render order...

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

answered Dec 23 '15 at 16:27

peter.edwards

335
1
3

score 0 · Answer 3 · answered Oct 09 '16 at 11:52

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

Please note that it may be a good idea to provide some explanation about what exactly this code is doing, as it may not be very helpful for the original question asker to understand what's going on, as well as future visitors to the website. — orangething, Oct 09 '16 at 12:27
Apologies, I just noticed there are actually comments within the code itself, but it may be a better idea to include this explanation outside of the code block, because as it's currently formatted, it's a bit difficult to read and understand. — orangething, Oct 09 '16 at 12:29

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

3 Answers3

Linked

Related