ASP.NET MVC5中如何设置表格内的复选框不可点击

嘿，针对你想禁止表格内复选框被点击的需求，这里有几个简单易实现的方案，结合你的Razor渲染代码来给你举例：

方法1：直接添加HTML disabled 属性（最省心的方案） #

这是最简单直接的方式，给复选框加上disabled属性后，浏览器会自动禁用它的交互，用户没法点击，同时表单提交时也不会带上这个复选框的状态。

修改你的Razor循环代码，在复选框标签里加入disabled：

<tbody>
    @for(var i = 0; i < Model.Writers.Count(); i++) {
        <tr data-id="@Model.Writers[i].WriterId" 
            data-name="@Model.Writers[i].FirstName@Model.Writers[i].LastName" 
            data-membership="@Model.Writers[i].Membership" 
            data-capipinumber="@Model.Writers[i].CaeIpiNumber" 
            data-share="@Model.Writers[i].Share">
            <td>
                <!-- 给复选框加上 disabled 属性 -->
                <input type="checkbox" disabled />
            </td>
            <!-- 其他表格单元格内容 -->
        </tr>
    }
</tbody>

小提示：disabled会让复选框视觉上变灰，如果不想改变它的外观，可以试试下面的方法。

方法2：用CSS阻止点击（保持复选框外观不变） #

如果希望复选框看起来和正常状态一样，但就是不能被点击，可以用CSS的pointer-events: none来禁用它的交互能力，再配合user-select: none防止用户选中复选框的文本（如果有的话）。

首先给复选框加一个自定义类，比如no-click-checkbox：

<input type="checkbox" class="no-click-checkbox" />

然后在你的CSS样式里添加：

.no-click-checkbox {
    pointer-events: none;
    user-select: none;
    /* 可选：如果想稍微暗示它不可点击，可以加 opacity: 0.8; 不加也完全不影响功能 */
}

这种方法的好处是视觉上几乎没变化，但用户完全没法和这个复选框交互。

方法3：用JavaScript动态控制禁用（适合复杂场景） #

如果需要根据某些条件动态开启或禁用复选框（比如只有特定行的复选框不能点），那用JavaScript来控制会更灵活。

先给复选框加一个类标识：

<input type="checkbox" class="table-writer-checkbox" />

然后添加一段脚本：

// 获取表格内所有目标复选框，逐个绑定点击阻止事件
document.querySelectorAll('tbody .table-writer-checkbox').forEach(checkbox => {
    checkbox.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认的复选框切换行为
        e.stopPropagation(); // 阻止事件冒泡到父元素
    });
});

要是你需要动态判断是否禁用，还可以在事件里加条件判断，比如根据行的data-membership属性来决定是否阻止点击。

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