如何禁用@Html.CheckBoxFor开关组件的‘NO’选项？

嘿，这个问题挺有意思的——原生复选框（包括你用的这类开关插件，看起来是Bootstrap Switch）本身并不支持单独禁用某一个选项，但我们可以通过前端JS拦截操作+后端验证兜底的方式来实现你要的效果，具体方案如下：

步骤1：移除全局禁用属性 #

首先把Razor代码里的disabled = "disabled"去掉，因为这个属性会直接禁用整个控件，我们需要保留控件的可交互性，只限制“切换到NO”的操作：

@Html.CheckBoxFor(m => m.AccountUser.AdminAccess, new { 
    data_on_text = "YES", 
    data_off_text = "NO", 
    data_on_color = "success", 
    data_off_color = "danger", 
    @class = "switchCheckbox" 
})

步骤2：用JS拦截“切换到NO”的操作 #

利用Bootstrap Switch的事件监听机制，当用户试图把开关从YES切换到NO时，阻止这个操作并将状态强制切回YES，同时可以给出友好提示：

$(document).ready(function() {
    // 初始化开关插件
    $('.switchCheckbox').bootstrapSwitch();
    
    // 监听开关状态变化事件
    $('.switchCheckbox').on('switchChange.bootstrapSwitch', function(event, state) {
        // state为false表示用户试图切换到NO（OFF）状态
        if (!state) {
            // 强制将状态改回YES（ON），第三个参数true表示不触发事件，避免循环
            $(this).bootstrapSwitch('state', true, true);
            // 可选：给用户提示不能关闭这个选项
            alert('无法关闭管理员权限，请联系系统管理员！');
        }
    });
});

步骤3：补充CSS增强视觉提示（可选） #

为了让用户直观感受到“NO选项不可用”，可以通过CSS把NO按钮设为半透明并禁止点击：

/* 针对Bootstrap Switch的OFF按钮设置不可点击样式 */
.switchCheckbox .bootstrap-switch-handle-off.bootstrap-switch-danger {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

步骤4：后端验证兜底（关键） #

前端的控制可以被用户通过浏览器控制台绕过，所以一定要在后端保存数据时做兜底验证，确保AdminAccess不会被恶意设置为false：

[HttpPost]
public ActionResult UpdateAccount(YourViewModel model)
{
    // 强制保留管理员权限状态
    if (!model.AccountUser.AdminAccess)
    {
        model.AccountUser.AdminAccess = true;
        // 可选：添加模型错误提示
        ModelState.AddModelError("AccountUser.AdminAccess", "无法关闭管理员权限");
    }

    // 后续的保存逻辑
    if (ModelState.IsValid)
    {
        // 保存到数据库
        _dbContext.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(model);
}

这样就能实现“只能保持YES或从NO改成YES，无法从YES改成NO”的效果啦～

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