Menu
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?
<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.
450
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
As a quick solution either you can apply colspan for your td or You can have both the radio button controls in same td so that the change due to long text wont affect the display of radiobutton.
HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the <input> element of HTML. When a particular option is selected using a radio button, the other options are deselected i.e., one can only select a single option at a time.
Radio buttons allow only one choice within a group of buttons. Each radio button within a group should have the same name. You can create more than one group of radio buttons by using different names.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
