Как связать элементы ярлыков с помощью переключателей

У меня есть несколько кнопок параметров в моей форме, и мне всегда нужно щелкнуть по кнопке круглой кнопки, чтобы выбрать ее. Есть ли способ разрешить пользователю щелкнуть соответствующую метку, чтобы выбрать кнопку выбора?

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

Ответы

Ответ 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>