Checkbox无法取消勾选问题排查：附ASP.NET MVC代码示例

我来帮你排查这个Checkbox无法取消勾选的问题，结合你的Razor代码，主要有这几个常见原因和解决办法：

1. HTML Checkbox的checked属性特性导致的问题 #

这是最常见的原因！HTML里的checkbox控件很特殊——只要checked属性存在，不管它的值是true还是false，浏览器都会默认把它渲染为选中状态。

看你的代码：

<input type="checkbox" name="selectedOUs" value="@item.Value" checked="@item.Selected" class="checkbox-inline" />

当item.Selected为false时，页面会输出checked="false"，但浏览器依然会认为这个checkbox是选中的，自然就无法取消勾选。

解决办法 #

用Razor的条件判断，只有当item.Selected为true时才渲染checked属性：

<input type="checkbox" name="selectedOUs" value="@item.Value" 
       @(item.Selected ? "checked" : "") 
       class="checkbox-inline" />

这样当item.Selected为false时，checked属性根本不会出现在HTML里，浏览器就会正确渲染未选中状态。

2. Model绑定未正确更新导致页面回传后重新选中 #

如果你的页面是表单提交后重新加载的，可能是控制器的POST方法没有正确更新Model.OUList里的Selected属性，导致页面重新渲染时又把checkbox设为了选中状态。

解决办法 #

检查你的POST控制器方法，确保接收selectedOUs参数后，正确更新OUList中对应项的Selected状态：

[HttpPost]
public ActionResult YourAction(IEnumerable<string> selectedOUs, YourModel model)
{
    // 重新获取或更新OUList
    model.OUList = GetYourOUList();
    foreach (var item in model.OUList)
    {
        item.Selected = selectedOUs?.Contains(item.Value) ?? false;
    }
    // 其他逻辑...
    return View(model);
}

3. 页面JavaScript冲突 #

如果页面上有自定义的JavaScript代码监听了checkbox的change事件，可能不小心阻止了默认行为，或者强制设置了checkbox的选中状态，导致无法取消勾选。

解决办法 #

检查页面中的JS代码，比如有没有类似这样的逻辑：

$('.checkbox-inline').change(function(e) {
    e.preventDefault(); // 阻止了默认的勾选行为
    // 或者强制设置this.checked = true;
});

如果有这类代码，调整逻辑确保不干扰checkbox的原生勾选行为。

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