1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Checkbox is AWOL in ASP.NET MVC when using CheckBoxFor due to hidden input.

Ryan Ternier free asked 7 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?

rhubka free answered 5 years ago

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;

Multinerd free answered 6 years ago

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

Bartłomiej Malanowski staff answered 7 years ago

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

howie418 pro answered 7 years ago

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

howie418 pro answered 7 years ago

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 free commented 4 years ago

this solution worked for me, thanks.

I wish MDB should have fixed it by now.

TyronSmith priority commented 4 years ago

Thank you, this works great!

Bartłomiej Malanowski staff answered 7 years ago

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

Ryan Ternier free answered 7 years ago

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.

Ryan Ternier free answered 7 years ago

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.

Bartłomiej Malanowski staff answered 7 years ago

We currently don't have support for ASP.NET so I'm sorry, but I can't help you
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
checkbox
About author
Ryan Ternier
10Support score
4Questions 4Answers 0Snippets