直接绑定click事件无效，因Layui switch通过CSS伪元素模拟，真实checkbox被隐藏；须用form.on('switch(filterName)', callback)监听，且filterName需与lay-filter值完全一致。
为什么直接绑 click 事件无效
layui 的 switch 是通过 css 伪元素模拟的，真实 <input type="checkbox"> 被隐藏了。你写 $('#myswitch').on('click', ...) 根本监听不到点击动作——dom 上没触发原生 click 事件。
- 必须用 Layui 表单模块的专用监听：
form.on('switch(filterName)', callback) -
filterName必须和 HTML 中lay-filter="xxx"的值完全一致（区分大小写、空格） - 回调里的
data.elem.checked才是当前真实状态（注意是 DOM 属性，不是 jQuery 的.prop('checked')）
怎么在切换前弹确认框
Layui 的 switch 事件是「状态已变之后」才触发的，没法像 form.submit 那样用 event.preventDefault() 拦住。想实现“先问再决定是否真切”，得手动还原视觉 + 控制后续逻辑。
- 在
form.on('switch(...)回调里，立刻调layer.confirm()，文案根据data.elem.checked动态生成 - 用户点「确定」后，用
$(data.elem).prop('checked', !data.elem.checked)把开关状态翻回去（因为 Layui 已经改了 DOM） - 再手动发请求、更新 UI，并调
form.render('checkbox')同步 Layui 内部状态（注意是'checkbox'，不是'switch'） - 用户点「取消」或右上角 ×，同样要执行还原操作：
$(data.elem).prop('checked', data.elem.checked)+form.render('checkbox')
layer.confirm 回调里改状态为什么容易错乱
常见错误是：在 yes 或 btn2 回调里只改了 data.elem.checked，但没调 form.render('checkbox')，导致 Layui 缓存的状态和 DOM 不一致。下次再点这个开关，data.elem.checked 可能读错。
Switch Modes
下载
动态切换AI模型以优化成本与性能。当用户发出“eco mode”、“balanced mode”、“smart mode”或“max mode”等模式指令，或使用“/modes status”查询状态及“/modes setup”配置模式时触发。
- 只要动了
data.elem.checked，就必须跟一句form.render('checkbox') - 不要用
form.render('switch')—— 它不刷新 checkbox 状态，只重绘外观 - 如果表格里有多个 switch，确保每个都带唯一
lay-filter，否则所有开关共用一个监听，互相干扰
完整可抄的最小代码示例
form.on('switch(statusSwitch)', function(data){
const checked = data.elem.checked;
layer.confirm(checked ? '确定启用？' : '确认禁用？', {
btn: ['确定', '取消']
}, function(index){
// 点【确定】：还原开关状态（因为已自动切换），再发请求
$(data.elem).prop('checked', !checked);
form.render('checkbox');
$.post('/api/status', { id: 123, status: checked ? 1 : 0 }, function(res){
if(res.code === 0){
layer.msg('操作成功');
}
});
layer.close(index);
}, function(index){
// 点【取消】或右上角×：强制回滚到原始状态
$(data.elem).prop('checked', checked);
form.render('checkbox');
layer.close(index);
});
});
关键点不在弹窗本身，而在每次 DOM 状态变更后，是否同步了 Layui 的内部缓存。漏掉 form.render('checkbox') 这一行，后面所有逻辑都会逐渐偏移。
