唯一可靠路径是直接给 input 加 disabled 属性并调用 form.render('input');layui 不自动同步 disabled 样式与交互,需手动渲染,漏掉 render 会导致禁用失效,且提交前应确保渲染完成并校验状态。

直接给 input 加 disabled 属性,再调 form.render('input') —— 这是唯一可靠路径。别试 form.disable(),2.8 版本根本没这方法。
为什么加了 disabled 却还能点?
Layui 把原生 input 包了一层 UI(比如加了边框、背景色),只改 DOM 的 disabled 属性,Layui 不会自动同步样式和交互状态。
- 静态写法:在 HTML 里直接写
<input name="username" disabled>,但必须确保后面有form.render('input') - 动态写法:用 JS 设置
document.querySelector('input[name="username"]').disabled = true,紧接着调form.render('input') - 漏掉
form.render('input')是最常见错误,尤其在 AJAX 加载后追加表单时,渲染时机容易错位
form.render('input') 和全量 form.render() 怎么选?
传具体类型更轻量,避免重绘无关组件(比如 select、checkbox)影响性能。
- 只禁用普通文本框、密码框、数字框等原生
input类型 → 用form.render('input') - 不确定类型,或同时禁用了
textarea、select等 → 用form.render()全量刷新 - 如果页面有多个表单,建议传第二个参数指定
filter,例如form.render('input', 'my-form'),防止误刷其他表单
禁用后值还被提交?
理论上 disabled 字段不该参与提交,但 Layui 的 form.val() 或内部序列化逻辑可能因渲染未完成而读取到旧状态。
- 确保禁用操作发生在
form.on('submit', ...)回调之前,且form.render()已执行完毕 - 提交前手动校验:
document.querySelector('[name="username"]').disabled === true - 更稳妥做法:提交时临时移除
name属性,而不是只依赖disabled,例如elem.removeAttribute('name') - 注意:
form.val()读不到disabled字段的值,哪怕你 JS 改过value,这是浏览器限制
真正卡住人的从来不是加不加 disabled,而是 DOM 状态和 Layui 渲染状态没对齐——尤其在动态场景下,render 的时机、范围、版本兼容性,三者缺一不可。











