readonly允许聚焦、复制且值正常提交,但layui校验仍触发;disabled则完全禁用、不可聚焦、不提交值且校验跳过,选错会导致表单卡死或漏传数据。

直接给 input、select、textarea 加 readonly 或 disabled 属性就行,Layui 不会覆盖它们——但两者行为完全不同,选错一个,表单就卡住或漏传数据。
readonly 和 disabled 的核心区别
很多人以为加了 readonly 就“锁死了”,结果发现还能点进去、光标还闪烁——这恰恰是它该有的行为。而 disabled 才真正禁用:不可编辑、不可聚焦、不参与表单提交。
-
readonly:用户可聚焦、可复制、可选中文本,但不能修改;form.val()能读到值;Layui 校验(如required)仍会检查它 -
disabled:输入框变灰、无法点击、失焦、不随表单提交;form.val()读不到它的值;Layui 校验自动跳过它 - 常见错误:字段只读但保留
required,提交时校验失败——因为readonly不等于“已填”,只是不能改
表单里怎么安全设只读(非禁用)
如果只是展示数据、允许复制、又得把值传给后端,用 readonly 是唯一选择,但必须绕开校验陷阱。
- HTML 模板中直接写:
<input type="text" name="id" value="1001" readonly> - JS 动态控制:
document.querySelector('input[name="id"]').readOnly = true - 关键动作:删掉该字段的
required属性,或去掉lay-verify="required";服务端必须补上必填校验 - 样式同步:Layui 不自动给
readonly加灰底,建议手动加 class,比如layui-input layui-disabled(注意这不是内置类,需自己定义背景色)
select / checkbox / radio 怎么“只读”
select、checkbox、radio 原生不支持 readonly,硬加无效。想“视觉只读+值可用”,只能靠 disabled + 提前赋值 + 提交前移除。
- 静态写法:
<select name="status" disabled><option value="active">启用</option></select> - JS 控制(提交前):
elem.disabled = false,再调form.render('select')确保下拉箭头恢复 - 更稳妥的做法:提交前用
$('select[disabled]').removeAttr('disabled'),避免遗漏;但要注意,此时用户能改,得靠服务端兜底 - 别用
pointer-events: none盖一层遮罩——Layui 的下拉面板会穿透,交互依然生效
table 表格单元格只读不是靠 JS 绑事件
Layui table 默认所有单元格就是只读的。所谓“编辑”,必须显式在列配置里写 edit: 'text' 才会触发。没写这个,双击、单击、绑 cell 事件都没用。
- 检查列定义是否误写成
editor、editable或拼错edit - templet 模板里手写了
<input>?那edit配置会被忽略,表格内部根本不接管编辑逻辑 -
table.on('edit()')里return false不阻止编辑弹窗出现,只阻止你后续处理——input 已渲染,用户照输不误 - 真要动态禁用某列:在
done回调里用$('td[data-field="status"]').data('edit', false),而不是操作 DOM 属性
最易被忽略的点:只读字段若带 required,表单就永远提交不了;而 disabled 字段的值,form.val() 根本拿不到——这两条不提前理清,调试时会反复怀疑是 Layui Bug。











