Layui表格不支持单选但禁用全选的原生配置,需确保仅一列type:'radio'、禁用所有checkbox相关配置,在done回调中移除th点击监听并手动归一化radio状态。

直接结论:Layui 表格本身不支持“单选但禁用全选”的原生配置,必须手动拦截表头全选行为,并确保只有一列 type: 'radio',且不启用任何 checkbox 列。
为什么默认点击表头会全选?
Layui 表格的表头全选逻辑只作用于 type: 'checkbox' 列(即第一列带勾选框的列),它会自动绑定 lay-type="all" 并触发全选/反选。但如果你误配了 checkbox: true 或在 cols 里混用了 type: 'checkbox' 和 type: 'radio',就可能意外激活全选行为——哪怕你只想要单选。
- 检查你的
cols配置:确认**只有一列**且是{type: 'radio', fixed: 'left'},绝对不要出现{type: 'checkbox'}或checkbox: true选项 - 如果用了
toolbar自定义工具栏,确保里面没写<input type="checkbox">或调用table.checkAll() - 浏览器控制台搜
lay-type="all"—— 如果 DOM 中存在这个属性,说明某处触发了 checkbox 模式,得回溯渲染配置
如何阻止表头点击触发全选?
即使你没配 checkbox 列,某些自定义模板或旧版兼容代码可能在 th 上绑了全局 click 监听器,导致点击任意表头都执行全选。最稳妥的拦截方式是在 table.render() 的 done 回调中移除或覆盖它:
done: function(res, curr, count) {
// 移除所有 th 上可能存在的全选监听(尤其来自第三方脚本)
layui.$('.layui-table-box').find('th').off('click');
// 显式禁止表头点击触发任何选择行为
layui.$('.layui-table-header th').on('click', function(e) {
if (e.target.tagName === 'TH') {
e.stopPropagation();
return false;
}
});
}
- 别依赖
event.preventDefault()单独使用——Layui 的事件委托机制可能导致它不生效 - 重点监听
.layui-table-header th,而不是th[data-field],因为单选模式下表头没有 data-field 属性 - 如果用了固定列(
fixed: 'left'),记得同时处理.layui-table-fixed-l th
radio 单选模式下还有哪些“伪全选”风险?
用户可能通过键盘操作(如 Shift + 点击)或多点触控意外触发多选,或者用 DevTools 手动勾选多个 radio —— 这些不会被 Layui 自动拦截,需主动校验:
table.on('radio(test)', function(obj) {
// 每次单选触发时,强制确保只有一个 radio 有效
setTimeout(() => {
const allRadios = layui.$('input[type="radio"][name="test-radio"]');
allRadios.each(function() {
if (this !== obj.elem) this.checked = false;
});
layui.form.render('radio'); // 同步 UI
}, 0);
});
- 不用
table.uncheckRow或setRowChecked,因为 radio 列不参与这些 API 的状态管理 - 必须用原生
this.checked = false操作 DOM,再调form.render('radio'),否则 UI 不刷新 -
setTimeout是为了等 Layui 内部事件队列清空,避免竞态
真正麻烦的不是实现单选,而是确保没人能绕过限制——表头点击、键盘行为、DOM 操作、甚至移动端长按都可能破坏单选约束。最稳的方式是:删掉所有 checkbox 相关配置 + 拦截所有 th click + 每次 radio 触发后手动归一化 DOM 状态。


















