最稳妥方式是遍历所有radio元素并设el.disabled = true：用document.querySelectorAll('input[type="radio"]')获取，避免disabled="false"错误写法，注意动态插入、Shadow DOM及千级数量优化。
直接给所有 disabled 属性
最稳妥、兼容性最好、且不影响 DOM 结构的方式，是遍历所有 radio 元素并显式设置 disabled 属性。注意：仅设 disabled 属性（不赋值）即可生效，不要写成 disabled="false"——那反而会启用禁用状态。
实操建议：
- 用
document.querySelectorAll('input[type="radio"]')获取全部 radio 元素，比getElementsByTagName更精准，避免误选其他input - 遍历时用
el.disabled = true（JS 属性操作），而非el.setAttribute('disabled', '')（DOM 属性操作），前者更可靠，尤其在动态修改时 - 如果页面有动态插入的 radio（如通过 Vue/React 渲染），需在插入后单独处理，或监听
mutationObserver，但多数场景下一次性执行已足够
用 CSS 伪类 :disabled 配合 JS 批量控制样式和交互
单纯加 disabled 属性后，浏览器默认会灰化、禁用点击，但若你自定义了 radio 样式（比如用 label::before 模拟圆点），可能需要同步更新 CSS 状态，否则视觉上仍可“点击”。
实操建议：
- 在 CSS 中统一定义
input[type="radio"]:disabled + label { opacity: 0.5; pointer-events: none; }，确保视觉与行为一致 - 避免只靠
pointer-events: none禁用点击——它不阻止表单提交时的值采集，也不影响checked状态变更逻辑，必须配合disabled属性 - 若用框架（如 React），不要在渲染时靠
disabled={isDisabled}控制单个 radio，而应在父级传入统一开关，减少重复判断
注意 name 分组和已选中项的特殊行为
radio 是按 name 分组互斥的，批量禁用时，已选中的那个 radio 被禁用后，用户无法再切换到同组其他选项——这是预期行为。但容易被忽略的是：禁用后，该 radio 的 checked 属性仍为 true，其值仍会随表单提交。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 如果目标是“彻底清空选择”，需在禁用前先清除
checked：el.checked = false，再设disabled = true - 若只是临时禁用（比如等待异步校验完成），保留原
checked状态更合理，后续启用时无需手动恢复 - 禁用后调用
form.reset()不会重置 disabled 元素的状态，所以不能依赖它来“反向启用”
避开 jQuery 依赖，用原生 JS 一行搞定（带防错）
如果你项目没引入 jQuery，又想写得简洁，可以用以下一行代码安全执行（自动跳过无匹配元素）：
document.querySelectorAll('input[type="radio"]').forEach(el => el.disabled = true);
但要注意：
- IE11 不支持
forEach在NodeList上直接调用，需转数组：Array.from(...).forEach(...) - 如果页面含 Shadow DOM 内的 radio，
querySelectorAll默认查不到，需额外遍历shadowRoot - 禁用操作本身极快，但若 radio 数量超千个，建议加
requestIdleCallback防阻塞主线程（实际极少遇到）
真正麻烦的不是禁用动作本身，而是禁用后是否要同步清理 checked、是否要适配自定义样式、以及是否要应对动态插入的新 radio——这些边界情况，比“怎么写那行 JS”更容易出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
