Come associare elementi etichetta con pulsanti di opzione

Question

Ho alcuni pulsanti di opzione nel mio modulo e ho sempre bisogno di fare clic esattamente sul pulsante di opzione rotondo per selezionarlo. C'è un modo per consentire all'utente di fare clic sull'etichetta associata per selezionare il pulsante di opzione?

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

ho trovato alcune soluzioni qui: How to associate labels with radio buttons ma questi non mi si addice perché preferisco una soluzione specifica per MVC.

Answer 1

Avvolgere ogni pulsante e testo dell'etichetta associato all'interno di un elemento <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>