change事件最可靠，因它在DOM状态更新后触发，确保读取到最新radio值；click可能因聚焦延迟导致读取旧值；表单重置需手动同步按钮状态。
radio选中后如何触发按钮状态变更
直接监听 change 事件最可靠，click 在部分浏览器（如 Safari 移动端）可能因聚焦延迟导致状态读取不准。重点不是“怎么改按钮”，而是“什么时候读取 radio 的当前值”——必须等 DOM 状态真正更新后再操作。
-
change事件在用户完成选择（释放鼠标/触控）且控件值实际改变后才触发，此时checked属性已同步 - 别用
onclick+document.querySelector('input[name="xxx"]:checked')，DOM 可能还没更新，读到的是旧值 - 如果按钮是
，只需在事件里切换disabled属性，无需手动设class或样式
原生 JavaScript 绑定示例（无框架）
假设单选组 name 是 payment，提交按钮 id 是 submitBtn：
document.querySelectorAll('input[name="payment"]').forEach(radio => {
radio.addEventListener('change', function() {
const submitBtn = document.getElementById('submitBtn');
// 只要有任一 radio 被选中，就启用按钮
const isChecked = document.querySelector('input[name="payment"]:checked') !== null;
submitBtn.disabled = !isChecked;
});
});
注意：不要用 radio.checked 判断当前这个 radio 是否被选中再赋值——因为 change 事件只在值变化时触发，但你需要的是“当前整体是否已选”，所以统一查 :checked 更稳妥。
Vue 中响应式处理的坑
用 v-model 绑定时，别在 @change 里重复取值；v-model 已保证数据同步，直接用响应式变量即可：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="radio" v-model="selectedPayment" value="alipay"><input type="radio" v-model="selectedPayment" value="wechat"><button :disabled="!selectedPayment">提交</button>
常见错误：@change="handleChange" 里又手动查 DOM，破坏响应式链路；或者把 selectedPayment 初始化为 null 却忘了设默认值，导致按钮一直禁用。
表单重置时按钮状态不同步怎么办
原生 form.reset() 不会触发 radio 的 change 事件，按钮状态会卡住。必须手动补监听：
- 给 form 加
reset事件监听器 - 在回调里显式设置按钮为
disabled，并重置绑定变量（如 Vue 中selectedPayment = ''） - 若用原生 JS，可调用
form.reset()后，再执行一次按钮状态判断逻辑
这个点容易被忽略——测试时只点单选、不点重置，就发现不了按钮“假启用”问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
