How do I make radiobuttonFors selectable by its text?

Question

I am stumped by the following:

Here is my code:

                <div class="editor-field">
                    <% foreach (string Item in HR_Applications.Helper.GetOrdersForDay(DayOfWeek.Monday))
                       { %>
                    <%= Html.RadioButtonFor(model => model.MondayOrder,Item) %>
                    <%: Item %>
                    <br />
                    <%} %>
                </div>

This code renders my radiobuttons just fine. The problem that I have here is that I am worried users cannot select the radiobuttons by its text, but must click the buttons itself. How do I make the radiobuttons selectable by its text?

This control must be used: business requirement set out to me.

Answer 1

Set the id of your RadioButton and use a label with the for attribute.

<label for="<%:Item.Name%>"><%:Item.Name%></label>
<%= Html.RadioButtonFor(model => model.MondayOrder,Item, new {id = Item.Name}) %>

Update

If you're not able to use a unique value from your model for the Ids then use a counter to keep track and append it to your Ids:

<% 
int counter = 0;
foreach ( [...])
{
   <label for="<%:Item.Name + counter%>"><%:Item.Name%></label>
[...]
counter++;

}
%>