尝试根据 Razor 页面上的复选框值更改 <td> 背景颜色

【问题标题】：Trying to change <td> background color based on checkbox value on Razor page尝试根据 Razor 页面上的复选框值更改 <td> 背景颜色
【发布时间】：2023-03-21 01:39:01
【问题描述】：

只要选中其中的复选框，我希望它变成红色。 Html.DisplayFor 使事情变得更复杂一些。 SQL Server 表中的 Inactive 字段为布尔值、零或一。

<td align="center">

        @Html.DisplayFor(modelItem => item.Inactive)

</td>

查看表格时，该值为 0 或 1。该页面显示了一个所需的复选框，但我试图引用它的值并设置周围表格单元格的背景颜色。

【问题讨论】：

标签： html asp.net-core razor-pages displayfor

【解决方案1】：

尝试用EditFor替换DisplayFor，然后在你的视图中添加如下js：

function changeColor(t) {
            if (t.checked) {
                $(t).parent().css('background', 'red');
            } else {
                $(t).parent().css('background', 'none');
            }
            
        }
        $('input[type=checkbox]').change(function () {
            changeColor(this);
        })
$(function () {
            $('input[type=checkbox]').each(function () {
                changeColor(this);
            });
           
        })

【讨论】：

太棒了。非常感谢。通过使用 Html.DisplayFor 而不是 .EditFor，我能够在常规公共视图中将其禁用。我注意到它改变了所有“真”复选框的背景。有没有只引用一个“非活动”复选框？这样我就可以在非活动输入也与其他复选框共享的其他地方使用它。