Geek Answers Handbook

MVC Style Loop RadioButtonList with Grouping

I am looking at some printable questions on the page. Each question requires 5 radio buttons with numbers from 0 to 5.

They currently work as expected (if a little rude) For example:

<table>
<tr>
@for (int i = 0; i < Model.Questions.Count; i++)
        { <td style="width:80px; padding-left: 10px;">
                    <label for="q1-0" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "0") 0</label>
                </td>
                @*middle*@
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-1" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "1") 1</label>
                </td>
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-2" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "2") 2</label>
                </td>
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-3" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "3") 3</label>
                </td>
                @*last*@
                <td style="width:80px; padding-left: 10px;">
                    <label for="q1-4" class="rblBreq">@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "4") 4</label>
                </td>
            </tr>
        }
    </table>

What I'm trying to do is add a style similar to cssCheckBox.com

However, when I try to use this example, grouping no longer works, for example. pressing checkbox_2, checkbox_3or checkbox_1always causes checkbox_0 checked...

I tried using (mvc) LabelFor, but this will not work, assuming id, etc. same in all flags.

<td style="width:80px; padding-left: 10px;">
@Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, "1", new { @class = "css-checkbox" })
@Html.LabelFor(m => m.PatientQuestions[i].Answer, "1", new { @class = "css-label" })
</td>

Any idea on how to get a style / grouping that works with a list of radio buttons would be great.

+4
1

, , , id, . .

<table>
    @for (int i = 0; i < Model.Questions.Count; i++)
    {
        <tr>
            @{
                int answersCount = 5;
                for (int answerIndex = 0; answerIndex < answersCount; answerIndex++)
                {
                    var answerId = String.Format("Question_{0}_{1}", i, answerIndex);
                    <td style="width: 80px; padding-left: 10px;">
                        @Html.RadioButtonFor(m => m.PatientQuestions[i].Answer, answerIndex.ToString(), new { @class = "css-checkbox", @id = answerId })
                        @Html.LabelFor(m => m.PatientQuestions[i].Answer, answerIndex.ToString(), new { @class = "css-label", @for = answerId })
                    </td>
                }
            }
        </tr>
    }
</table>

?

. html.

<td style="width:80px; padding-left: 10px;">
    <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="1" type="radio">
    <label class="css-label" for="PatientQuestions_0__Answer">1</label>
</td>

<td style="width:80px; padding-left: 10px;">
    <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="2" type="radio">
    <label class="css-label" for="PatientQuestions_0__Answer">2</label>
</td>
 ....


input[type=radio].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=radio].css-checkbox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
  background-position: 0 -15px;
}
label.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_7d1e967c68c39221a9ad8a026a805769.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<table>
  <tr>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="1" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">1</label>
    </td>

    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="2" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">2</label>
    </td>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="3" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">3</label>
    </td>
    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="4" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">4</label>
    </td>

    <td style="width:80px; padding-left: 10px;">
      <input class="css-checkbox" id="PatientQuestions_0__Answer" name="PatientQuestions[0].Answer" value="5" type="radio">
      <label class="css-label" for="PatientQuestions_0__Answer">5</label>
    </td>
  </tr>
</table>
Hide result

, id=PatientQuestions_0__Answer, . label for=PatientQuestions_0__Answer . , label id, , .

: , id radio.

<td style="width: 80px; padding-left: 10px;">
    <input class="css-checkbox" id="Question_0_0" name="PatientQuestions[0].Answer" value="0" type="radio">
    <label class="css-label" for="Question_0_0">0</label>
</td>
<td style="width: 80px; padding-left: 10px;">
    <input class="css-checkbox" id="Question_0_1" name="PatientQuestions[0].Answer" value="1" type="radio">
    <label class="css-label" for="Question_0_1">1</label>
</td>
....


input[type=radio].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=radio].css-checkbox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
  background-position: 0 -15px;
}
label.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_7d1e967c68c39221a9ad8a026a805769.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<table>
  <tr>
                        <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkbox" id="Question_0_0" name="PatientQuestions[0].Answer" value="0" type="radio">
                        <label class="css-label" for="Question_0_0">0</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkbox" id="Question_0_1" name="PatientQuestions[0].Answer" value="1" type="radio">
                        <label class="css-label" for="Question_0_1">1</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkbox" id="Question_0_2" name="PatientQuestions[0].Answer" value="2" type="radio">
                        <label class="css-label" for="Question_0_2">2</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkbox" id="Question_0_3" name="PatientQuestions[0].Answer" value="3" type="radio">
                        <label class="css-label" for="Question_0_3">3</label>
                    </td>
                    <td style="width: 80px; padding-left: 10px;">
                        <input class="css-checkbox" id="Question_0_4" name="PatientQuestions[0].Answer" value="4" type="radio">
                        <label class="css-label" for="Question_0_4">4</label>
                    </td>
  </tr>
</table>
Hide result

, id , labels .

id, ? css .css-checkbox, , , . , . ( , )

+1

More articles:


All Articles