如何阻止Bootstrap Toggle直接切换？需先校验函数再执行切换

嘿，这个需求很实用！要实现点击Bootstrap Toggle时先执行校验、再决定是否切换的效果，我们可以利用组件自带的事件拦截机制来搞定，具体步骤如下：

1. 保留你的HTML结构 #

先把你提供的Toggle组件代码放好，确保已经正确引入了Bootstrap、Bootstrap Toggle的CSS和JS文件：

<input type="checkbox" id="power-pump4" 
       data-on="فعال" 
       data-off="غیر فعال" 
       data-toggle="toggle" 
       data-size="mini" 
       data-onstyle="success">

2. 编写校验与事件拦截逻辑 #

接下来用JavaScript（结合jQuery，因为Bootstrap Toggle依赖它）实现核心逻辑：

// 第一步：定义你的自定义校验函数
function checkBeforeToggle() {
    // 这里替换成你的实际校验逻辑，比如：
    // - 检查用户操作权限
    // - 验证关联表单字段是否合规
    // - 请求后端接口确认状态变更权限等
    // 示例：用confirm模拟校验，点击确定返回true，取消返回false
    return confirm("确认要切换泵的状态吗？");
}

// 第二步：监听Toggle的切换事件
$('#power-pump4').on('toggle', function(event) {
    // 先执行校验
    const isValidationPassed = checkBeforeToggle();
    
    // 如果校验不通过，阻止默认的切换行为
    if (!isValidationPassed) {
        event.preventDefault();
    }
});

逻辑说明 #

• 校验函数：checkBeforeToggle是完全自定义的部分，只要返回true（校验通过）或false（校验失败）即可，你可以根据业务需求自由修改里面的判断逻辑。
• 事件拦截：Bootstrap Toggle提供了toggle事件，这个事件会在组件准备切换状态时触发。我们在事件回调里先执行校验，若校验不通过，调用event.preventDefault()就能阻止组件切换，保持原有状态；校验通过的话，组件会自动完成状态切换。

这样就能完美实现你想要的“先校验、再切换”的效果啦！

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