layui table复选框禁用状态需在templet中根据数据字段动态生成disabled属性,否则reload会丢失;必须确保后端返回判断依据字段,前端模板严格校验。

layui table 复选框列重载后变回可选?关键是禁用状态没持久化
layui 的 table.render() 每次重载(比如调用 table.reload())都会重新渲染整行 DOM,包括复选框。你之前手动加的 disabled 属性或 lay-disabled 类会被清掉——这不是 bug,是设计使然:表格渲染只认数据字段和列配置,不记 DOM 状态。
用 templet 渲染带 disabled 的复选框,别依赖 JS 后续操作
最稳的方式是在列定义里直接输出禁用的 HTML,让 layui 每次都按需生成。靠 done 回调再遍历加 disabled,时机难控、易漏、且 reload 时又失效。
- 在列配置中用
templet返回完整 input 标签,显式写disabled - 禁用逻辑写在模板里,比如根据某字段值判断:
{d.status === 'locked' ? 'disabled' : ''} - 不要用
type: 'checkbox'列 + 外部控制,那套不保存禁用态
cols: [[
{type: 'checkbox', templet: function(d) {
return d.data.status === 'disabled'
? '<input type="checkbox" disabled>'
: '<input type="checkbox">';
}}
]]
注意 checkCol 和 disabled 的优先级关系
如果你同时用了 checkCol: false(隐藏默认复选框列),又在自定义列里手写 checkbox,那禁用逻辑完全由你控制;但若保留 type: 'checkbox' 列,layui 会自动管理勾选状态,此时加 disabled 只能靠 templet 覆盖,不能靠改 DOM 属性。
-
type: 'checkbox'列本身不支持直接配disabled参数 - 想部分禁用,必须用
templet替换整个单元格内容 - 禁用后,
table.checkStatus()仍会把该行计入data,但isDisabled字段不会自动设为 true——你要自己在业务逻辑里跳过这些行
reload 时传参别漏掉原始数据里的禁用依据字段
重载请求返回的数据,必须包含能判断是否禁用的字段(比如 status、canSelect)。如果接口只返回展示字段,没传判断依据,templet 就没法知道该不该加 disabled。
- 后端返回数据里至少带一个布尔或枚举字段,明确标识该行是否可选
- 前端
templet函数里严格检查这个字段,别用undefined或空字符串做默认启用 - 测试时故意 reload 一次,看禁用的行有没有“复活”,这是最直接的验证方式











