禁用整组单选按钮的正确方式是为每个 radio 元素单独添加 disabled 属性；readonly 对其无效；动态操作时需遍历全部同 name 元素并注意 DOM 加载时机与后端校验。
直接给整组 input[type="radio"] 加 disabled 属性，是最简单、最可靠的方式——它既阻止用户点击，又确保这些选项的值不会被提交。
为什么不能只用 readonly
readonly 对 input[type="radio"] 完全无效。浏览器根本不识别这个属性，写了也白写。它只适用于 text、email、number 等可编辑输入框。单选按钮是“选择”而非“编辑”，语义上就不支持 readonly。
禁用整组单选按钮的正确写法
要让一组单选按钮全部不可操作，必须对每个 input 元素单独设置 disabled：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="radio" name="status" value="active" disabled> 启用<br><input type="radio" name="status" value="inactive" disabled> 停用<br><input type="radio" name="status" value="pending" disabled> 审核中
-
disabled是布尔属性，写成disabled="true"或disabled="false"都是错的——只要存在就生效 - 禁用后，这些按钮会变灰、无法聚焦、不响应鼠标/键盘操作，且表单提交时完全忽略其
value - 如果其中某个原本已选中，禁用后它仍保持
checked状态（DOM 层面），但提交时不会带出该值
动态禁用时容易踩的坑
用 JavaScript 控制时，常见错误不是逻辑错，而是漏掉关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 只改
element.disabled = true，却没同步清理element.checked = false—— 用户可能在禁用前已选中某项，禁用后它仍保留在 DOM 中，若后续 JS 误读checked状态，会导致逻辑混乱 - 用
querySelector只拿到第一个单选按钮，结果只禁用了第一个，其余仍可点 —— 必须用querySelectorAll('input[name="xxx"]')遍历全部 - 在 DOM 加载完成前就执行 JS 操作，导致
querySelectorAll返回空 NodeList —— 务必包裹在DOMContentLoaded或$(document).ready()中
真正需要“禁止修改”的场景，往往隐含一个前提：这组选项的值是服务端决定的、前端不该也不允许干预。所以除了加 disabled，后端校验仍是最后一道防线——毕竟任何前端限制都可被绕过。
