Layui table 禁用指定行 checkbox 需通过 cols 中 checkbox 列的 checkRender 回调返回带 disabled 属性的原生 input 元素,仅此方式可动态控制;禁用后 checkStatus 仍包含该行数据,需手动过滤。
layui table 如何禁用指定行的 checkbox
直接在 cols 配置中加 checkbox 列不会自动禁用某几行;真正起作用的是 checkrender 回调 + disabled 属性控制。核心不是“隐藏勾选”,而是让 checkbox 渲染时带 disabled 状态。
必须用 checkRender 才能动态控制行禁选
默认 checkbox 列不支持按行条件禁用,只有通过 checkRender 函数返回自定义 DOM,并手动加 disabled 属性才行。这个回调会在每行渲染 checkbox 时执行一次,传入当前行数据 data,你在这里决定是否禁用。
- 不写
checkRender:所有行可选,无法差异化 - 写了但没返回含
disabled的 input:等于白写 - 返回的 input 必须是原生
<input type="checkbox">,且带disabled属性才生效
示例(只禁用 status 为 "closed" 的行):
table.render({
elem: '#demo',
cols: [[
{type: 'checkbox', checkRender: function(data) {
if (data.status === 'closed') {
return '<input type="checkbox" disabled>';
}
return '<input type="checkbox">';
}},
{field: 'name', title: '姓名'}
]]
});
禁用后还要处理全选/反选逻辑
单纯加 disabled 只影响 UI 勾选,但 table.checkStatus() 仍会把禁用行算进 data 数组里——这是常见坑。因为 Layui 默认不区分“禁用”和“未勾选”,它只看 checkbox 元素是否存在且未被移除。
- 调用
table.checkStatus('demo')返回的data里,包含所有 checkbox 元素对应的数据,不管是否disabled - 如需真实已勾选数据,得手动过滤:
res.data.filter(item => !item.status || item.status !== 'closed') - 如果用了
layFilter监听checkbox事件,也要注意:禁用行的 click 不会触发,但全选框点击后,禁用行的 checkbox 状态不会变,也不会触发该事件
兼容性与性能注意点
checkRender 是 Layui 2.8+ 新增的 API,旧版本(如 2.7.x)不支持,强行使用会报 checkRender is not a function 错误。
- 确认 Layui 版本:
layui.v输出应 ≥"2.8.0" - 如果表格数据量大(>1000 行),
checkRender每行都拼字符串,可能轻微卡顿;此时建议用templet+ 自定义列替代 checkbox 类型列,更可控 - 禁用状态样式依赖 Layui 默认 CSS,若项目覆盖了
.layui-form-checkbox[disabled]样式,需同步调整,否则视觉上不明显
禁用逻辑藏在 checkRender 里,而不是数据字段或事件监听里——这点最容易漏掉,一上来就去绑 click 或改 data,绕远路。


















