c# - .NET/CSS Foreach 复选框独立样式

Question

我有一个 foreach 循环创建 CheckBoxes，导致它们都具有相同的 ID。我有一些 CSS，但是当您选中任何框时，它会将 css 放到第一次迭代中，我该如何添加一些动态 ID 之类的东西以仅将 css 添加到所选框？

循环:

@foreach (var item in Model.Where(p => p.UserTable.ID == ViewBag.UserTableID))
{
    <tr>
        <td>
            <div class="select">
                <input type="checkbox" id="select" name="" />
                <label for="select"></label>
            </div>

CSS:

.select {
width: 20px;
position: relative;
}

.select label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: #eee;
    border: 1px solid #ddd;
}

    .select label:after {
        opacity: 0.2;
        content: '';
        position: absolute;
        width: 9px;
        height: 5.5px;
        background: transparent;
        top: 4.8px;
        left: 5.4px;
        border: 3px solid #333;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
    }

.select label:hover::after {
opacity: 0.5;
}

.select input[type=checkbox]:checked + label:after {
opacity: 1;
}

Answer 1

为什么不直接为每个元素分配它们的元素 ID？

<div class="select">
    <input type="checkbox" id="select_@item.ID" />
    <label for="select"></label>
</div>

除非您在该列表中有重复项，否则它们将始终是唯一的。

顺便说一下:你的 View 不应该过滤掉元素，它应该只提供它需要的元素(Where 应该在数据库级别完成)