26

How does one set the label of a checkbox? I looked at some sites and they are using lambda expressions, but I can't understand them. I am new to asp.net MVC.

@{
   bool chkVal = false;  
 }
<li>@Html.CheckBox("chksumma",chkVal,new {@value = "5"})</li>
<li>@Html.LabelFor(, "");
EluciusFTW
  • 2,565
  • 6
  • 42
  • 59
Vignesh
  • 1,458
  • 12
  • 31
  • 59

5 Answers5

31

This is a really good way:

<div class="checkbox">
    <label>@Html.CheckBoxFor(x => item.IsSelected)&nbsp;@Html.DisplayNameFor(x => item.IsSelected)</label>
</div>

Check box with label

  1. It's what is recommended by bootstrap 3.
  2. It works in a table.
  3. You can click on the check box OR the label to select the box. (This is an important usability feature.)
  4. The cursor is properly the "hand" instead of the arrow pointer.

EDIT

This is really easy to do in Bootstrap 4.

You just wrap your label and input inside form-check markup:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
Jess
  • 23,901
  • 21
  • 124
  • 145
  • 3
    I tried various other S/O "fixes" but this one worked for me using MVC5/ CheckBoxFor and DisplayNameFor (implemented in the Model) Thanks! – Mike Cave Aug 09 '18 at 10:29
16

If you are using a Model you could do:

<li>@Html.CheckBoxFor(f=> f.chksumma)</li>
<li>@Html.LabelFor(f=> f.chksumma)</li>

Then use the attributes TGH pointed out

otherwise if you don't have a model all you can do for labels is:

@Html.Label("LabelText")

which prints a standalone label or and craft it if you want it to link with the item

<label for="chksumma">LAbelText</label>

If you really don't want to hand craft it you can write your own HTML helper as explained here http://develoq.net/2011/how-to-create-custom-html-helpers-for-asp-net-mvc-3-and-razor-view-engine/

Mark Milford
  • 1,180
  • 1
  • 15
  • 32
  • 1
    You shouldn't use `@Html.Label("LabelText")`, for a stand-alone label, as it renders ``, which looks like, but is not a stand-alone label. It is a label for a control named _LabelText_, which is probably not what you want and invalidates your page on the W3C validation service with _"The value of the for attribute of the label element must be the ID of a non-hidden form control."_, if that ID does not exist. Simply use plain html: ``. – R. Schreurs Aug 22 '18 at 13:21
10

I'm assuming that you want the label to tick the checkbox when you click on it.

In this case, the for attribute of the HTML <label> field must point to the ID of the relevant input element.

If you're using a model, @Html.CheckBoxFor will generate a checkbox without an ID, so you will need to add an ID to the checkbox, then point your label to the same ID. The easiest way is to replicate the checkbox's name into its ID field using the @Html.NameFor helper method. Here's an example:

@Html.CheckBoxFor(x => x.Active, new {id=Html.NameFor(x => x.Active)})
<label for="@Html.NameFor(x => x.Active)">Active</label>

Generated HTML (without validation attributes):

<input id="[0].Active" name="[0].Active" type="checkbox" value="true" />
<input name="[0].Active" type="hidden" value="false" />
<label for="[0].Active">Active</label>
Simon MᶜKenzie
  • 8,344
  • 13
  • 50
  • 77
4

I worked on something similar and got around it by this snipped code

<div class="row">
<div class="col-xs-3">
<label>
    @Html.CheckBoxFor(x => x.AdvanceSearch.IsExactPhrase)
    @Html.LabelFor(x => x.AdvanceSearch.IsExactPhrase)
</label>
</div> ...

Hope it helps the others

st35ly
  • 1,215
  • 18
  • 24
-2

You shouldn't need the <label> tag at all:

<div class="block mTop20">
  @HtmlCheckboxFor(f => f.prop)
  @Html.LabelFor(f=>f.prop,"This is the label text")
</div>
LawrenceM
  • 11
  • 1
  • 3