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

Question

我正在尝试使用 materialize css 来设置 Razor 语法的样式。这就是我现在所拥有的。这不起作用，无法选中复选框。

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