禁用单选按钮唯一标准可靠的方式是直接使用 disabled 布尔属性；disabled="false"等无效，visibility: hidden 或 opacity: 0 仅隐藏不禁止交互，易致误操作、无障碍失败及提交丢失值。

直接给 <input type="radio"> 加 disabled 属性，是禁用指定单选按钮选项唯一标准、可靠的方式；其他写法（如 disabled="false"、readonly 或 CSS 隐藏）要么无效，要么破坏语义或交互逻辑。

为什么不能用 visibility: hidden 或 opacity: 0

这些样式只是让按钮“看不见”，但没移除交互能力：Tab 键仍能聚焦、鼠标点击仍会触发选中、屏幕阅读器仍可读取，且 DOM 中依然参与 name 分组——极易造成用户误操作或无障碍失败。更严重的是，隐藏后若原已选中该 radio，表单提交时可能丢失值（因为视觉上无反馈，用户无法察觉未生效）。

disabled 属性怎么写才有效

必须是布尔属性，只存在即生效，不接受任何值：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• ✅ 正确：<input type="radio" name="plan" value="pro" disabled>
• ❌ 无效：disabled="false"、disabled="0"、disabled=""（空字符串在部分旧浏览器中也不稳定）
• ❌ 错误目标：<fieldset disabled></fieldset> 是禁用整组，<div disabled> 完全无效（<code>disabled 只对表单控件合法）

  JavaScript 动态禁用时的三个关键点

  用 JS 控制 radio.disabled = true 看似简单，但容易漏掉以下环节：

  立即学习“前端免费学习笔记（深入）”；

  • 必须等 DOM 就绪后再操作，否则 document.getElementById('myRadio') 可能为 null
  • 如果当前 checked 的正是这个即将被禁用的 radio，需主动清除：radio.checked = false，否则表单提交时仍可能带上它（某些浏览器在禁用前已锁定值）
  • 批量操作时别直接遍历 document.querySelectorAll('input[name="x"]') 后赋值，应先转数组：Array.from(radios).forEach(r => r.disabled = condition)，避免 HTMLCollection 实时性导致跳项

  禁用后还要注意什么

  禁用的 radio 不参与提交，但它的 value 仍存在于 DOM 中，服务端不能假设“没提交=没这个字段”，而要明确校验字段是否存在且合法。另外，移动端 Safari 对 disabled 的视觉反馈极弱，建议加内联样式增强提示：style="opacity: 0.4;" 或配合 label 文字注明 “(不可选)”。