0

The code for one of my checkboxes is as follows:

@Html.CheckBox("option1", new { id = "option1" })
<label for="option1">Option 1</label>

But when I "Inspect Element" it renders as:

<input data-val="true" data-val-required="The option1 field is required." id="option1" name="option1" type="checkbox" value="true" />
<input name="option1" type="hidden" value="false" />
<label for="option1">Option 1</label>

According to http://materializecss.com/forms.html the label tag should come after the input tag that it relates to therefore the checkbox "image" is relating to the hidden field rather than the visible field. I still need the hidden field, I just need to put the label in between the visible and hidden field.

Nate
  • 87
  • 10
  • The hidden field is not going to be visible and will take any space between the two items. Why you worry about the location of that ? – Shyju Aug 10 '16 at 14:03
  • @shyju Sorry, forgot to clarify, since the label is right under the hidden field, the checkbox is also hidden. – Nate Aug 10 '16 at 14:10
  • There is no way your checkbox will be hidden unless you have some custom css which does that. See here http://jsbin.com/melenewobu/edit?html,output – Shyju Aug 10 '16 at 14:12
  • @Shyju I'm using MaterializeCSS, here's what I'm seeing: https://i.imgur.com/XHt9ntA.png. But when I use the default bootstrap, it looks exactly like what you made. – Nate Aug 10 '16 at 14:21
  • @JamieD77 Thanks, didn't see this one while searching. – Nate Aug 10 '16 at 15:05
  • Refer also [this answer](http://stackoverflow.com/questions/35550075/how-to-create-an-editortemplate-for-bootstrap-checkbox/35552413#35552413) - different plugin, but the same issue - you need to change the css selectors to account for the hidden input –  Aug 11 '16 at 00:29

0 Answers0