必须用 prop() 设置 checked 属性并调用 form.render() 才生效,因为 layui 复选框是 dom 模拟渲染,attr() 仅操作 html 属性而不影响布尔型 dom 属性及样式同步。
直接改 checked 属性没用,必须用 prop() + form.render() 才生效。
为什么 attr("checked", true) 不起作用
layui 的 checkbox 是通过 DOM 模拟渲染的,原生 input[type=checkbox] 被隐藏或替换为自定义样式节点。此时 attr() 只操作 HTML 属性(checked="checked"),但浏览器是否勾选取决于 DOM 的 checked 属性值(布尔型)。attr() 无法同步这个底层状态,而 prop() 直接设置 DOM 属性,才真正影响视觉和行为。
-
attr('checked')返回字符串"checked"或undefined -
prop('checked')返回布尔值true或false - 调用
form.render()是为了让 layui 重新扫描并同步样式(比如加/去 ✅ 图标)
动态添加 checkbox 后默认选中失效怎么办
比如用 $().append() 插入含 checked 的 checkbox,但页面不显示勾选——因为 layui 还没处理它。
- 先用
prop('checked', true)设置状态 - 再调用
form.render('checkbox')(推荐指定类型,避免重绘整个表单) - 如果是在
layui.use()外部操作,确保layui和form已加载完成,否则form.render会报错
Layui 表格里的复选框不能用 change 监听
表格内 type: 'checkbox' 列的复选框是 layui 自行代理渲染的,DOM 上的 input 实际不可见或被移除,所以绑定原生 change 事件完全收不到回调。
- 必须用
table.on('checkbox(id)', callback),其中id是你table.render()时传的id值 - 回调参数
obj包含checked、data、type('one'或'all') - 不要尝试用
$('input[name="layTableCheckbox"]').prop('checked', true)批量设状态——layui 不感知,后续table.checkStatus()仍返回旧结果
Vue + Layui 混合场景下 checkbox 状态不同步
Vue 用 v-model 或 :checked 控制状态,但调用 form.render() 后,Layui 会覆盖 DOM 并清空 Vue 的事件绑定,导致 @change 失效、状态不再响应数据变化。
- 避免在 Vue 组件内混用
form.render();如必须使用,应在 Vue 数据更新后手动触发form.render('checkbox') - 更稳妥的做法:把 checkbox 完全交给 Vue 渲染(不用 layui 的
form模块),仅用 layui 样式类(如layui-form-checkbox)做 UI 适配 - 若已用
v-for渲染,不要让 layui 初始化时扫描该区域(比如给容器加lay-ignore属性)
最常被忽略的一点:所有状态变更都应以 prop() 为准,attr() 只适合写死在 HTML 里的初始值;而 form.render() 不是可有可无的“刷新”,它是让 layui 把你改过的 DOM 状态映射到它的视觉层的必要步骤。











