Search code examples
cssasp.net-mvcrazormaterialize

how to style razor forEach inline check boxes

I am trying to style razor syntax with materialize css. this is what I have right now. Which doesn't work, the check boxes cannot be checked.

currentCheckboxes

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

this is what I need to have, the issue is every check box that i check always checks Admin. I know its because the loop is naming the id and for the same for all check boxes. also I would like the closer to there check boxes

whatIwantToHaveWork

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

  • You can do add some unique property value and create unique id like "filled-in-box-"+item.id.

    Here in example, I have suffixed item.id to create unique id.

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

    OR

    Just get rid of @HTML.Label and use

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