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

Posted 2023-03-27

【中文标题】尝试根据 Razor 页面上的复选框值更改 <td> 背景颜色

【英文标题】：Trying to change <td> background color based on checkbox value on Razor page

【发布时间】：2021-11-25 09:28:15

【问题描述】：

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

<td align="center">

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

</td>

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

【参考方案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，我能够在常规公共视图中将其禁用。我注意到它改变了所有“真”复选框的背景。有没有只引用一个“非活动”复选框？这样我就可以在非活动输入也与其他复选框共享的其他地方使用它。