20

I have some option buttons in my form and I always need to click exactly on the round option button to select it. Is there a way to allow user to click on the associated label to select the option button?

enter image description here

<p>
    <span class="editor-label">
        @Html.LabelFor(m => m.ADR)
    </span>
    <span class="editor-field">
        @Html.RadioButtonFor(model => model.ADR, "Yes", AdrYesOptions) 
        @UserResource.YesValue
        @Html.RadioButtonFor(model => model.ADR, "No", AdrNoOptions) 
        @UserResource.NoValue 

    </span>
</p>

I found some solutions here: How to associate labels with radio buttons but these don't suit me because I prefer a solution specific for MVC.

Community
  • 1
  • 1
Bronzato
  • 9,438
  • 29
  • 120
  • 212
  • What do you mean by _specific for MVC_? The linked questions contains a valid answer (though not the accepted one) showing how to achieve this. – marapet Mar 03 '12 at 11:53
  • What I mean is (if possible) keeping my code Html.LabelFor... Html.RadioButtonFor... and not something like – Bronzato Mar 03 '12 at 11:58

1 Answers1

43

Wrap each radio button and associated label text inside a <label> element:

<p>
    <span class="editor-label"> @Html.LabelFor(m => m.ADR) </span>
    <span class="editor-field">
        <label> @Html.RadioButtonFor(model => model.ADR, "Yes", AdrYesOptions) @UserResource.YesValue </label>
        <label> @Html.RadioButtonFor(model => model.ADR, "No", AdrNoOptions) @UserResource.NoValue </label>
    </span>   
</p>
Michael Liu
  • 52,147
  • 13
  • 117
  • 150
  • 1
    Note that if the user clicks the main label `@Html.LabelFor(m => m.ADR)` this will select the first radio option. – Matt Jenkins Oct 28 '14 at 17:22