直接在HTML中加disabled属性即可禁用checkbox,但Layui需调用form.render('checkbox')同步样式;表格中须用templet模板按数据条件渲染disabled与checked,并手动过滤禁用行参与选中统计。

直接在 HTML 的 <input type="checkbox"> 上加 disabled 属性即可禁用,但必须配合 form.render('checkbox') 才能让 Layui 的美化样式同步失效;表格中禁用某行复选框则不能靠 JS 动态设 disabled,得用 templet 模板按行数据条件渲染。
表单里独立 checkbox 怎么禁用
原生写法加 disabled 就生效,但 Layui 会把原生元素隐藏、用伪元素模拟 UI,所以只加属性没用:
-
<input type="checkbox" name="agree" disabled>→ 必须紧跟form.render('checkbox') - JS 动态禁用:用
$('input[name="agree"]').prop('disabled', true),再调一次form.render('checkbox') - 启用时用
.removeAttr('disabled')+ 再次form.render('checkbox'),别漏掉 - 常见错:只改 DOM 属性不 render,结果看着灰了但点一下还是能勾上
layui table 表格中某行 checkbox 禁用不了?
表格的复选框是动态渲染的,done 回调里用 jQuery 手动加 disabled 会失效(重绘后被覆盖),也别依赖 checkRender(Layui ≥2.8.0 才有,且不参与 table.checkStatus() 计算):
- 正确做法:删掉
{type: 'checkbox'}列,换成普通列 +templet: '#tpl' - 模板里必须保留
name="layTableCheckbox"(这是 Layui 内部识别多选的硬性约定) - 禁用逻辑写在模板内,比如:
{{# if(d.status === 'closed'){ }} disabled {{# } }} - 同时控制
checked:不能只靠d.layChecked字段,得显式写{{# if(d.LAY_CHECKED){ }} checked {{# } }}
禁用后 table.checkStatus() 还包含被禁用的行?
是的。Layui 完全不感知 disabled,所有行都计入统计,包括已禁用却勾上的(用户右键删掉 disabled 属性就能绕过):
- 真实已选数据要手动过滤:
const cache = table.cache['demo']; const valid = cache.filter(d => d.status !== 'closed' && d.LAY_CHECKED); - 全选判断不能看
res.count,得比对:valid.length === cache.filter(d => d.status !== 'closed').length - 监听
checkbox事件时第一句就该写:if (obj.disabled) return; - 导出、提交、批量操作前,所有涉及“已选”的逻辑,都得补这层过滤——没有例外
最易被忽略的是:禁用只是 UI 遮罩,Layui 的状态管理、父子联动、分页缓存、甚至 table.reload() 后的恢复,全都无视 disabled。你写的每一处“已选中”逻辑,都得自己加一层数据校验。


















