必须用templet自定义checkbox列并显式写disabled属性;checkrender仅layui≥2.8.0支持且不参与table.checkstatus()识别;禁用行仍计入checkstatus结果,需手动过滤cache中status≠'closed'且lay_checked为true的数据。
必须用 templet 自定义 checkbox 列并显式写 disabled 属性,checkrender 仅在 layui ≥2.8.0 可用且只适用于默认 type: 'checkbox' 列——但它的返回值不参与 table.checkstatus() 的状态识别,实际业务中几乎不可靠。
用 templet 渲染带 disabled 的 checkbox
放弃内置 type: 'checkbox',改用普通列 + 模板。关键点:
-
name="layTableCheckbox"必须保留,这是 Layui 内部识别多选行的硬性约定 - 模板里要同时控制
disabled和checked,不能只靠数据字段如d.layChecked—— 它不会自动映射到 DOM - 禁用逻辑必须基于当前行数据
d(比如d.status === 'closed'),不能依赖外部变量或异步状态 - 示例模板:
<script type="text/html" id="checkboxTpl"> <input type="checkbox" name="layTableCheckbox" {{# if(d.status === 'closed'){ }} disabled {{# } }} {{# if(d.layChecked){ }} checked {{# } }}> </script>
table.checkStatus() 返回结果包含被禁用的行
Layui 不会过滤掉 disabled 的 checkbox,table.checkStatus('demo').data 仍会把它们算进去。真实可用的已勾选数据需手动筛:
- 先取缓存:
const cache = table.cache['demo'] - 再过滤:
cache.filter(d => d.status !== 'closed' && d.LAY_CHECKED)(注意字段名是LAY_CHECKED,不是layChecked) - 全选判断不能看
res.count,得比对:validChecked.length === cache.filter(d => d.status !== 'closed').length - 如果用了
checkStrictly: true,父子联动不受影响,但结果仍要手动过滤
监听 checkbox 事件时拦截禁用项
光加 disabled 不够,用户点击全选框后,禁用行的 checkbox 状态不会变,但 table.on('checkbox(test)') 仍可能触发(取决于是否真渲染了 input)。稳妥做法:
- 在事件回调里加判断:
table.on('checkbox(test)', function(obj){ if (obj.disabled) return; // 后续逻辑 }); - 不要用
pointer-events: none替代disabled:键盘 Space 仍可切换、无障碍支持差、checkStatus结果错误 - 重载表格(
table.reload())前,确保模板 script 标签已在 DOM 中,否则禁用逻辑丢失 - 自定义皮肤(如
skin: 'row')可能覆盖input[disabled]样式,建议加一行 CSS:input[disabled]{opacity: 0.5; cursor: not-allowed;}
最易被忽略的是:禁用只是 UI 层遮蔽,Layui 的状态管理完全 unaware —— 所有涉及“已选中”的逻辑,都得自己补一层数据过滤,没有例外。











