单选按钮组天然互斥，防重复点击的核心是提交过程控制而非radio本身；需禁用整个radio组并配合服务端白名单与幂等校验。
单选按钮组本身就不会“重复点击”——它天然互斥，点一个，同 name 的其他项自动取消。你真正想防的，是用户在表单提交过程中反复点击某个 radio 或提交按钮，导致状态错乱或请求重复。核心问题不在 radio 本身，而在它和提交动作的协同控制。
radio 点击后立即取消选中，但保留可点击外观
如果目标是让单选按钮看起来能点、能响应 onclick，但实际不改变选中状态（比如用于触发侧边栏、展开说明等），必须在点击后同步设 checked = false：
- 只能用内联
onclick="this.checked = false"或addEventListener('click', () => { e.target.checked = false }, { once: false })—— 异步（如setTimeout）会失败，因为浏览器已更新状态 -
preventDefault()对radio无效：它的默认行为是切换checked，不是跳转或提交 - 所有同名
name的input[type="radio"]都要加该逻辑，否则漏掉一个，它就会真实选中并取消其他项 - 禁用
disabled属性不行：它会让元素彻底失去click事件，连监听都收不到
表单提交时防止 radio 组被意外切换
用户在填写表单时，可能反复点击已选中的 radio，或在提交中又去点别的选项，造成状态抖动。这不是“重复点击”，而是提交流程未锁定：
- 监听
form.submit事件，在触发时立刻禁用整个radio组：document.querySelectorAll('input[name="xxx"]').forEach(r => r.disabled = true) - 别只禁用按钮 ——
radio本身也能通过空格/回车触发选中，必须一并锁定 - 提交失败后，需手动恢复
disabled状态；成功则通常跳转或清空表单，无需恢复 - 注意
form.reset()会重置所有disabled，导致防重复失效；建议用 JS 手动清空字段 + 显式控制按钮和radio状态
为什么 radio.click() 有时不触发 change 事件
在代码中调用 radio.click() 模拟点击，常被用于“强制选中”，但它在某些场景下不可靠：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari、或父容器设置了
pointer-events: none时，click()可能静默失败 -
radio.checked = true是更底层的操作，它直接设置 DOM 属性，一定会触发change事件，并同步更新FormData - 如果你在防重复逻辑里依赖
change回调做后续动作（比如启用提交按钮），务必用赋值方式而非click()
最容易被忽略的是：单选按钮的交互安全性完全依赖 name 一致性与服务端校验。前端任何禁用、拦截、赋值操作，都可在 DevTools 中被绕过。真正关键的防线，是后端对 radio 提交的 value 做白名单校验 + 请求幂等控制。
