如何将标签元素与单选按钮相关联

Question

我的表单中有一些选项按钮,我总是需要单击圆形选项按钮来选择它.有没有办法让用户点击相关标签来选择选项按钮？

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

我在这里找到了一些解决方案:如何将标签与单选按钮相关联但这些不适合我,因为我更喜欢MVC专用的解决方案.

Answer 1

将<label>元素中的每个单选按钮和相关标签文本换行:

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