Checkbox is AWOL in ASP.NET MVC when using CheckBoxFor due t

Topic: Checkbox is AWOL in ASP.NET MVC when using CheckBoxFor due to hidden input.

Ryan Ternier asked 10 years ago

This is something that ASP.NET MVC does when rending a checkbox. It is similar to Ruby as described here: http://stackoverflow.com/questions/2860940/why-does-the-checkboxfor-render-an-additional-input-tag-and-how-can-i-get-the-v https://forums.asp.net/t/1314753.aspx Aside from why ASP.NET MVC does it, it breaks MDB on all checkboxes. I'm trying to find an eloquent solution rather than updating ~300 on my web app. Markup in Question (2 examples) 1) I know this isn't supported yet by MDB 4 - though it is valid HTML. The "box" for the checkbox is never visible. <label> <input id="SignRememberMe" name="SignRememberMe" tabindex="11" type="checkbox" value="true" data-parsley-multiple="SignRememberMe" data-parsley-id="3515"> <input name="SignRememberMe" type="hidden" value="false"> Remember Me </label> 2) The checkbox will never be seen at all. It's hidden from <input id="SignRememberMe" name="SignRememberMe" tabindex="11" type="checkbox" value="true" data-parsley-multiple="SignRememberMe" data-parsley-id="3515"> <input name="SignRememberMe" type="hidden" value="false"> <label for="SignRememberMe"> Remember Me </label> Is there a work around with MDB for this?

Add comment

howie418 pro answered 9 years ago

1 0 Best answer

After 2 hours of pulling my hair out and then finally understanding the problem, I came up with this fix. Just put this javascript somewhere that will get included on all pages that have checkboxes. $('document').ready(function () { $(":checkbox").each(function () { var hidden_input = $(this).next("input:hidden"); var label = hidden_input.next("label"); //temporarily remove the hidden field hidden_input.remove(); //re-add the hidden field after the label label.after(hidden_input); }); });

brijesh@njit.edu commented 7 years ago

this solution worked for me, thanks.

I wish MDB should have fixed it by now.

TyronSmith pro premium priority commented 7 years ago

Thank you, this works great!

Add comment

Bartłomiej Malanowski staff pro premium answered 10 years ago

0 0 Best answer

We currently don't have support for ASP.NET so I'm sorry, but I can't help you

Add comment

Ryan Ternier answered 10 years ago

0 0 Best answer

This really isn't support for MVC, it's supporting the following format which isn't that uncommon. <input id=”SignRememberMe” name=”SignRememberMe” type=”checkbox” value=”true”> <input name=”SignRememberMe” type=”hidden” value=”false”> <label for=”SignRememberMe”> Remember Me </label> That is the main issue here i'm trying to address. The above markup causes the checkbox part of the control to be invisible.

Add comment

Ryan Ternier answered 10 years ago

0 0 Best answer

Here's the reason why this doesn't work. If the <label /> element doesn't immediately follow the <input /> checkbox element, MD Bootstrap will not render the checkbox. For example, the following works: <fieldset class="form-group"> <input class="checkbox_Technology" id="InvestmentIndustriesList_0__Checked" name="InvestmentIndustriesList[0].Checked" type="checkbox" value="true"> <label for="InvestmentIndustriesList_0__Checked">Technology</label> <input name="InvestmentIndustriesList[0].Checked" type="hidden" value="false"> </fieldset> The following will not work <fieldset class="form-group"> <input type="checkbox" name="InvestmentIndustriesList[0].Checked" id="InvestmentIndustriesList_0__Checked" value="Technology" class="checkbox_Technology"> <input type="hidden" name="InvestmentIndustriesList[0].Checked" value="False"> <label for="InvestmentIndustriesList_0__Checked">Technology</label> </fieldset> Including the above, having the checkbox inside a <label /> element is also not working with MDB. Are there any plans to fix either of these? Thanks.

Add comment

Bartłomiej Malanowski staff pro premium answered 10 years ago

0 0 Best answer

Thanks for noticing and sharing your solution. We'll fix it

Add comment

howie418 pro answered 9 years ago

0 0 Best answer

(ASP MVC VB.net) also just be sure to do a @Html.CheckBoxFor(Function(x) x.RememberMe, New With {.id = "RememberMe"}) <label for="RememberMe">Remember Me</label>

Add comment

Bartłomiej Malanowski staff pro premium answered 9 years ago

0 0 Best answer

@howie418, I'm so glad to see you found a solution ;)

Add comment

Multinerd answered 8 years ago

0 0 Best answer

It appears this has not been fixed yet. in MDB 4.5.0 and the js provided above does not work.

Heres a 'MvcHtmlString ' extension im using the works

https://gist.github.com/multinerd/21debdc7a9278049c82ae8078e1b148b

just replace

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "form-control validate", id = "loginform-rememberme" })

with

@Html.BasicCheckBoxFor(m => m.RememberMe, new { @class = "form-control validate", id = "loginform-rememberme" })

Add comment

rhubka answered 8 years ago

0 0 Best answer

Yes! Thank you so much for creating the extension. It works great. For anyone else using it here's what you need at the top of the class.

using System;
using System.Web.Mvc;
using System.Linq.Expressions;
using System.Web.Mvc.Html;

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Ryan Ternier

10Support score
4Questions 4Answers

0Snippets likes 0Snippets