原生JavaScript解决复选框无法批量控制单选按钮禁用问题（无jQuery）

效果不符合预期是两个明确的代码问题导致的：

• document.querySelector() 仅会返回匹配选择器的第一个DOM元素，原逻辑每次触发复选框变更时，只操作了第一个UDP协议的单选按钮，第二个TCP单选按钮从未被代码控制，因此取消勾选时仅一个按钮被禁用。
• 原HTML中单选按钮上书写的disable是错误属性，标准HTML表单元素的禁用属性为disabled，属性拼写错误导致页面初始加载时两个单选按钮未被默认禁用，和预期初始状态不符。

1. 修正HTML属性错误 #

将两个协议单选按钮的错误属性替换为标准disabled属性，保证SIP复选框未勾选的初始状态下，两个单选按钮默认不可用：

<input type="radio" class="testD" name="protocol" value="udp" disabled/>UDP
<input type="radio" class="testD" name="protocol" value="tcp" disabled/>TCP <label class="testD">(UDP is most Common)</label>

2. 替换原有JS逻辑 #

使用document.querySelectorAll()获取所有name为protocol的单选按钮，遍历节点列表统一控制所有按钮的禁用状态，同时增加页面初始化的状态同步，避免加载时状态错位：

const sipCheckbox = document.querySelector("input[name=sip]");
const protocolRadios = document.querySelectorAll("input[name=protocol]");

// 页面加载完成后先同步一次初始状态
toggleProtocolRadio(sipCheckbox.checked);

// 绑定复选框变更事件
sipCheckbox.addEventListener("change", (e) => {
  toggleProtocolRadio(e.target.checked);
});

/**
 * 统一控制协议单选按钮的启用/禁用状态
 * @param {boolean} isEnable 是否启用单选按钮
 */
function toggleProtocolRadio(isEnable) {
  protocolRadios.forEach(radio => {
    if (isEnable) {
      radio.removeAttribute("disabled");
    } else {
      radio.setAttribute("disabled", "disabled");
      radio.checked = false; // 禁用时清空已选中的值，避免提交无效参数
    }
  })
}

修复后逻辑完全匹配需求：

• 页面初始加载、SIP复选框未勾选时，UDP、TCP两个单选按钮全部禁用
• 勾选SIP复选框时，两个单选按钮同时解除禁用，可正常选择协议
• 取消勾选SIP复选框时，两个单选按钮同步被禁用，同时自动清空之前选中的协议值，避免无效参数提交
• 全部逻辑使用原生JavaScript实现，无jQuery或其他第三方库依赖

内容的提问来源于stack exchange，提问作者mastaSabin