layui开关组件如何设置禁用不可点

Layui switch 设置 disabled 状态的唯一有效方式是直接操作原生 checkbox 的 disabled 属性并立即调用 form.render('checkbox')；HTML 初始化或 JS 动态设置后均需渲染，否则 UI 与状态不同步，且提交时仍会序列化 disabled 字段。

layui switch 组件如何设置 disabled 状态

直接给 <input type="checkbox"> 加 disabled 属性，再调用 form.render('checkbox') —— 这是唯一生效路径。Layui 的 switch 是基于原生 checkbox 封装的，不渲染、不重绘，UI 和交互都不会同步禁用状态。

1. HTML 初始化时禁用：写 <input type="checkbox" name="status" lay-skin="switch" disabled>，但必须紧接着执行 form.render('checkbox')
2. JS 动态禁用：$("#mySwitch").prop("disabled", true) 或 .attr("disabled", "disabled")，然后立刻调 form.render('checkbox')
3. 别漏掉 form 模块加载：layui.use(['form'], function(){ ... }) 内操作，否则 form.render 会报错
4. 禁用后仍能点？说明 form.render('checkbox') 没执行，或执行时机不对（比如在 DOM 插入前就调了）

为什么不能只改 class 或删 DOM 节点

有人试过手动删掉 .layui-form-switch 下的 <span>，或加 pointer-events: none，这些都不可靠。Layui 在 resize、重新渲染、甚至点击其他表单元素时，都会重建 switch 结构，你的 CSS 或 DOM 修改会被覆盖。更糟的是，原生 input 仍带 disabled 属性，但 UI 层没灰显，用户误点后可能触发 change 事件（尤其在未校验 disabled 状态的回调里）。

1. form.render('checkbox') 不仅刷新样式，还会重新绑定事件监听器，确保 disabled 状态被内部逻辑识别
2. 若页面有多个 switch，传 'checkbox' 比传空字符串更安全，避免误刷 radio 或 select
3. 2.8 版本不支持 form.disable()，别查错文档；3.x 才有该方法，且需字段已注册进 form 实例

禁用后还要注意 submit 行为

即使 UI 已灰显、不可点，如果提交时没检查 input.disabled，Layui 的 form.on('submit') 仍可能把该字段值序列化进去——因为底层 input 元素还在 DOM 中，只是被禁用了。

1. 提交前建议加一层校验：if ($("#mySwitch").prop("disabled")) delete data.status
2. 或者更彻底：禁用时顺便移除 name 属性，启用时再加回，这样连序列化都绕过
3. 别依赖“视觉不可点”就认为数据安全，Layui 的表单提交逻辑不自动过滤 disabled 字段

真正容易被忽略的是：禁用操作和 form.render('checkbox') 必须在同一个 JS 执行上下文里完成，中间不能穿插异步操作（如 AJAX 回调里先设 disabled，再 setTimeout 调 render），否则状态不同步。