html - 带分组的 MVC Looped RadioButtonList 样式

标签 html css asp.net-mvc

我循环浏览一些问题以在页面上打印出来，每个问题需要 5 个单选按钮，编号为 0 到 5。

目前它们按预期工作(如果有点粗糙) 像这样:

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

我想做的是添加一些像 cssCheckBox.com 上的样式

但是，当我使用示例尝试此操作时，分组不再有效，例如按 checkbox_2 、checkbox_3 或 checkbox_1 总是会导致 checkbox_0 被选中...

我已经尝试使用 (mvc)LabelFor，但这不起作用，假设由于 id 等在所有复选框中都是相同的。

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

任何关于如何使用单选按钮列表进行样式化/分组的想法都会很棒。

最佳答案

问题是所有的答案，对于一个问题，有相同的id，要解决这个问题你需要为生成唯一的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>

我们在这里注意到，一个组中的所有单选按钮都具有相同的 id=PatientQuestions_0__Answer。 label 也是 for=PatientQuestions_0__Answer 同样的 id。这意味着当您单击 label 时，具有相应 id 的输入被选中，但所有输入都具有相同的 id，这就是为什么只有第一个被选中。

解决方案: 我建议的解决方案为每个 radio 按钮制作一个唯一 ID。

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

我们可以注意到每个id都是唯一的并且labels指向正确的单选按钮。

为什么我需要unique id，普通版不需要？ 如果您查看 .css-checkbox 的 css 代码，您会发现他竭尽全力隐藏 radio 圈。您最终只能看到标签。(当您点击漂亮的 radio 时，您点击了漂亮的标签)

关于html - 带分组的 MVC Looped RadioButtonList 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29990104/

上一篇：javascript - 模态不起作用

下一篇：javascript - 如何在插件脚本之外调用 jquery 插件函数

相关文章：

html - Intellij IDEA 使用错误的注释样式

c# - 将 Controller 操作呈现为字符串(使用虚拟路径，无操作/ Controller 名称)ASP.NET MVC 3

html - 如何将图像对齐到 ionic 页面的中心

html - <div> 与子 <a>( anchor 标记)的意外行为

html - 如何在 html 上建立一个直接进入您的文本框的链接，如用户名？喜欢 Facebook

html - 左浮动元素未对齐

javascript - HTML - 如何滚动整个部分而不在中间停止？

javascript - Jquery .getJSON 和 ASP.NET MVC

c# - 如何修复，无法加载文件或程序集 'XXX' 或其依赖项之一。无法验证强名称签名

html - CSS 中垂直对齐的问题

©2024 IT工具网  联系我们