Layui文本域设为disabled需同时设置原生disabled属性并调用form.render('textarea'),否则UI不生效;disabled字段不参与表单提交和verify校验,如需提交值应改用readonly。

layui文本域怎么设为 disabled
直接给 textarea 元素加 disabled 属性,再调用 form.render('textarea'),才是生效的完整动作。Layui 不会自动识别原生属性变化,漏掉 form.render() 就等于没禁用。
- 静态写法:
<textarea name="remark" disabled></textarea>,然后初始化表单时执行form.render('textarea') - 动态控制:先获取 DOM 元素,
elem.disabled = true,再执行form.render('textarea') - 注意:disabled 的
textarea值不会被form.val()读取,提交时也不会包含该字段 —— 这是浏览器行为,不是 Layui Bug - 如果需要保留值提交但禁止编辑,改用
readonly属性(见下一条)
readonly 和 disabled 在 textarea 上的区别
readonly 让用户能聚焦、复制内容、参与表单提交;disabled 则完全锁定交互且不提交值。选哪个取决于业务逻辑是否需要后端接收该字段。
-
readonly写法:<textarea name="id" readonly>123</textarea>,无需额外form.render(),Layui 不覆盖该属性 - 但
readonly下右键菜单仍可“粘贴”,如需彻底拦截,得手动绑定onpaste并e.preventDefault() -
form.verify会校验readonly字段(比如带required),但跳过disabled字段 —— 这是容易卡住表单提交的坑 - 赋值时
form.val('formFilter', {id: 'xxx'})对readonly有效,对disabled无效
为什么 JS 动态设 disabled 没反应
常见原因是只改了 DOM 属性,没触发 Layui 的 UI 同步。textarea 被封装成带边框和滚动条的组件,原生 disabled 只作用于隐藏的原始节点,外层 UI 仍可点击。
- 必须显式调用
form.render('textarea'),不能只写form.render()(全量重绘可能影响性能) - 确认元素已由 Layui 渲染完成 —— 绑定操作要在
layui.use(['form'], function(){})回调内,或在form.on('submit')之前 - 别用
$('textarea[name="xxx"]').attr('disabled', true),应直接操作.disabled = true,避免 jQuery 与原生 DOM 状态不同步 - 若文本域是异步加载后插入的,需在插入后立即
form.render('textarea'),否则禁用失效
表格里 textarea 单元格怎么禁用编辑
Layui 表格单元格内的 textarea 编辑,本质还是靠列配置的 edit 属性驱动。只要列没设 edit: 'textarea',哪怕里面写了 <textarea>,双击也不会激活编辑。
- 正确做法:列定义中不写
edit,或明确设为edit: null—— 这是最干净的源头控制 - 错误做法:在
templet里硬塞一个<textarea disabled>,此时edit配置会被忽略,Layui 仍可能尝试接管输入行为 - 动态控制某行某列:在
done回调里用$('tr[data-index="0"] td[data-field="desc"]').data('edit', false) - 别在
table.on('edit()')里return false—— 此时输入框已经渲染出来,用户能输能删,只是你没处理后续逻辑


















