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

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>

我在这里找到了一些解决方案：How to associate labels with radio buttons但这些不适合我，因为我更喜欢专门针对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>