css - 如何为 Razor forEach 内联复选框设置样式

Question

我正在尝试使用具体化 css 来设置剃刀语法的样式。这就是我现在所拥有的。哪个不起作用，无法选中复选框。

<div class="form-group">
   <div class="col-md-12">
     @foreach (var item in (SelectList)ViewBag.RoleId)
       {
        <input type="checkbox" name="SelectedRoles" value="@item.Value" class="checkbox-inline" />
          @Html.Label(item.Value, new { @class = "control-label" })
        }
 </div>
</div>

这是我需要的，问题是我检查的每个复选框总是检查管理员。我知道它是因为循环正在命名 id 并且所有复选框都相同。我也想要更接近那里的复选框

<div class="form-group">
  <div class="col-md-12">
      @foreach (var item in (SelectList)ViewBag.RoleId)
        {
           <input type="checkbox" name="SelectedRoles" value="@item.Value" class="filled-in" id="filled-in-box" />
           @Html.Label(item.Value, new { @for = "filled-in-box" })
       }
   </div>
 </div>

Answer 1

您可以添加一些独特的属性值并创建独特的 id，例如"filled-in-box-"+item.id.

在此示例中，我添加了后缀item.id以创建唯一 ID。

@foreach (var item in (SelectList)ViewBag.RoleId)
{
    <input type="checkbox" name="SelectedRoles" value="@item.Value" class="filled-in" id="filled-in-box-@item.id" />
    @Html.Label(item.Value, new { @for = "filled-in-box-"+item.id })
}

或者

---

只需摆脱@HTML.Label并使用

<label>
    @item.Value <input type="checkbox" name="SelectedRoles" value="@item.Value" class="filled-in" />
</label>