如何为每个内联复选框设置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 })
}

OR

摆脱@HTML.Label并使用

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