layui单选框如何禁用其中一个选项

在前端开发内容学习中，layui单选框如何禁用其中一个选项是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

layui禁用单选框指定选项需三步：定位目标input→设disabled属性→调用form.render('radio')；漏任一步则仍可点击选中，且需注意键盘导航缺陷及IE兼容性问题。

layui单选框radio如何禁用指定选项

layui 的 radio 不支持直接对某个 <input type="radio"> 选项设 disabled 后自动同步 UI —— 它会渲染出一层包裹的 <div class="layui-form-radio">，原生 disabled 属性只作用于隐藏的原始 input，视觉和交互都不变。必须手动操作 DOM + 调用 form.render('radio') 才能生效。

禁用某一个 radio 选项的正确步骤

核心是三步：定位目标 input → 设 disabled 属性 → 刷新渲染。漏掉任意一步，用户仍可点击、选中、提交。

• 用 document.querySelector 或 jQuery 精准选中目标 radio 元素，推荐按 name 和 value 组合定位，例如：document.querySelector('input[name="gender"][value="other"]')
• 设置 elem.disabled = true（不要用 .attr("disabled", "disabled")，jQuery 1.9+ 之后应优先用 .prop()）
• 立即调用 layui.form.render('radio')；不传参数或传错类型（如 'select'）将无效
• 若页面有多个 radio 组，建议在 render 前加个 class 区分，避免全局重绘影响性能

禁用后键盘仍能选中？这是 layui 的固有缺陷

layui 默认不限制键盘导航（Tab / ↑↓ 键），即使 radio 被设了 disabled，焦点仍可停在它上面，回车后照样触发选中 —— 这是因为它没监听 disabled 状态做键盘拦截。

• 临时补救：在 form.on('radio(filterName)') 回调开头加判断：if ($(this).is(':disabled')) return;
• 更稳妥的做法：提交前校验 document.querySelector('input[name="xxx"]:checked').disabled === true，若命中则清空值并再次 form.render('radio')
• 注意：IE11 下 :disabled 伪类可能不兼容，可用 elem.hasAttribute('disabled') 替代

常见失效原因和避坑点

禁用失败往往不是代码写错，而是时机或上下文不对。

• form.render('radio') 必须在 layui.use('form', function(){...}) 回调内执行，否则 form 实例未加载，报错 form is not defined
• 如果 radio 是 AJAX 动态插入的，需等 DOM 渲染完成后再执行禁用逻辑，不能放在初始化脚本里就跑
• 别用 lay-data 传 {"disabled":true} —— 这个属性只用于携带自定义数据，对 UI 禁用完全无效
• 批量禁用多个选项时，先集中修改所有 input.disabled，最后只调一次 form.render('radio')，避免频繁重绘卡顿

真正麻烦的地方在于：禁用逻辑得同时覆盖鼠标点击、键盘导航、初始渲染、后续 JS 修改四个环节。少盯住一个，用户就能绕过去。