layui radio禁用需同步修改input的disabled属性并调用form.render('radio')重绘,否则ui不响应;键盘操作可能绕过禁用,需手动拦截或改name彻底隔离;表格中应在templet中条件渲染而非事后禁用。

layui radio 怎么禁用单个选项
不能只给 <input type="radio"> 加 disabled 属性就完事——Layui 的 radio 是用 div 包裹模拟出来的,原生属性不会自动同步到 UI 层。
必须同时做两件事:修改原始 input 的 disabled 状态 + 调用 form.render('radio') 重绘。否则界面上看起来还能点,甚至能提交值。
- 静态禁用(初始化时确定):直接在 HTML 里写
<input type="radio" name="gender" value="1" disabled> - 动态禁用(比如根据权限或联动逻辑):
$("#myRadio").prop("disabled", true),然后立刻执行form.render('radio') - 批量禁用多个 radio?别循环调
form.render(),先统一设好所有disabled,最后只调一次form.render('radio'),避免卡顿
layui radio 禁用后为什么还能被选中
常见于键盘操作:用户按 Tab 聚焦到已禁用的 radio,再按空格或回车,Layui 默认不拦截这个行为——它没检查 input.disabled 就直接触发了选中逻辑。
这不是 bug,是 Layui 模拟组件对 ARIA 规范支持不全的表现。鼠标点击会被灰显和阻止,但键盘路径没被覆盖。
- 临时补救:监听
form.on('radio(filterName)'),在回调里手动判断$(data.elem).prop('disabled'),如果为true,立刻data.elem.checked = false并再次form.render('radio') - 更稳妥的做法:禁用前就把对应 radio 的
name改掉(比如加个_disabled后缀),彻底脱离表单域,避免任何交互可能
layui 表格里的 radio 怎么禁用某一行
表格中的 radio 是通过 type: 'radio' 渲染的,它的禁用逻辑和普通 form 表单不同——你不能直接操作 DOM 上的 input,因为它是动态生成的。
正确做法是在列的 templet 中控制是否渲染 radio,而不是事后禁用。
- 示例:在模板里加条件判断
{ {# if(d.status !== 'locked') { }}<input type="radio" name="selectRow" value="{{d.id}}">{ {# } }} - 禁用后样式不明显?加 CSS 强制灰掉:
.layui-table tbody .layui-disabled input[type=radio] { opacity: 0.4; } - 注意:表格的
setRowChecked方法在 2.9.9 版本有兼容性问题,调用后 UI 不更新,别依赖它来“反向禁用”
form.render('radio') 不生效的几个关键点
最常踩的坑不是代码写错,而是执行时机不对或模块没加载全。
-
layui.use(['form'], function(){...})必须包裹所有涉及form的操作,漏掉就报form is not defined - 如果页面里有多个 form 实例,
form.render('radio')默认只作用于第一个,要指定容器:form.render('radio', '#myForm') - 禁用操作必须在
form.render()之后的 DOM 更新完成后再触发事件监听,否则form.on('radio(filter)')可能收不到回调 - Layui 2.8 及更早版本没有
form.disable(),别查文档抄错版本 API
真正麻烦的不是怎么写那两行代码,而是禁用状态要贯穿 DOM、UI、事件、提交、校验这五个层面——少同步一环,用户就能点、能切、能提交、能绕过验证。











