Razor页面如何根据checkbox值更改对应td单元格的背景色

实现方案 #

方案1：只读场景（无需修改勾选状态） #

仅需要页面加载时根据Inactive的值渲染对应背景，不需要支持用户修改勾选状态，直接在<td>标签上通过Razor语法绑定样式即可，不需要引入前端脚本：

<td align="center" style="background-color: @(item.Inactive ? "red" : "transparent")">
    @Html.DisplayFor(modelItem => item.Inactive)
</td>

也可以用CSS类优化可维护性：
首先定义样式：

.inactive-bg {
    background-color: red;
}

修改Razor代码：

<td align="center" class="@(item.Inactive ? "inactive-bg" : "")">
    @Html.DisplayFor(modelItem => item.Inactive)
</td>

方案2：可编辑场景（支持用户修改勾选状态） #

如果需要支持用户勾选/取消勾选时同步修改单元格背景，先把@Html.DisplayFor替换为@Html.EditorFor（DisplayFor默认生成禁用的勾选框，无法触发交互事件），再添加如下jQuery代码：

$(function() {
    // 页面加载时初始化所有单元格背景
    $('td input[type="checkbox"][name$="Inactive"]').each(function() {
        $(this).parent('td').toggleClass('inactive-bg', $(this).is(':checked'));
    });

    // 监听勾选状态变化，动态切换背景
    $('td input[type="checkbox"][name$="Inactive"]').on('change', function() {
        $(this).parent('td').toggleClass('inactive-bg', $(this).is(':checked'));
    });
});

内容的提问来源于stack exchange，提问作者JustJohn