JavaScript监听checkbox change事件控制radio按钮启用禁用

你的代码无法运行有两个核心错误：

• 你使用document.getElementById("protocol")获取单选按钮，但你的HTML中没有任何元素设置id="protocol"，选择器返回null，后续属性设置自然失效
• 你需要控制的是整组共2个name为protocol的单选按钮，不是单个元素，必须遍历所有同组按钮统一修改禁用状态，才能实现整组启用/禁用的效果

另外你写在checkbox上的onsubmit="goPFive(event)"和method="get"是无效属性，这两个属性仅属于<form>标签，写在普通input元素上没有任何作用，可以直接删除。

HTML部分 #

<input type="checkbox" name="sip">do this?
<input type="radio" class="testD" name="protocol" value="udp" disabled checked/>UDP
<input type="radio" class="testD" name="protocol" value="tcp" disabled />TCP

JavaScript部分 #

// 获取触发开关的sip复选框
const sipCheck = document.querySelector('input[name="sip"]');
// 获取整组protocol单选按钮
const protocolGroup = document.querySelectorAll('input[name="protocol"]');

sipCheck.addEventListener('change', () => {
  // 遍历组内所有单选按钮，同步禁用状态
  protocolGroup.forEach(radio => {
    radio.disabled = !sipCheck.checked;
  });
});

• document.querySelectorAll会返回匹配选择器的所有元素集合，不需要给单选按钮额外加id就能拿到整组元素
• 直接把复选框选中状态的取反值赋值给disabled属性：复选框勾选时checked为true，取反后为false，单选按钮启用；取消勾选时checked为false，取反后为true，单选按钮禁用，省去冗余的if/else判断
• 初始状态下复选框默认未勾选，单选按钮默认加了disabled属性，和逻辑预期一致，不需要额外做初始化处理

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