如何实现单选按钮组的联动禁用与启用？含示例代码

嘿，我来帮你搞定这两个单选按钮组的控制需求！咱们先从第二个更具体的场景入手，再解决第一组和第二组互斥禁用的问题。

问题2：第一组选"Yes"时禁用第二组，选"No"时启用 #

首先我把你的HTML稍微整理了下，加上标签关联，操作起来更方便：

<!-- 第一组单选按钮 -->
<div class="radio-group">
  <input type="radio" id="firstsetno" name="xfirstset" value="0" checked>
  <label for="firstsetno">No</label>
  <input type="radio" id="firstsetyes" name="xfirstset" value="1">
  <label for="firstsetyes">Yes</label>
</div>

<!-- 第二组单选按钮 -->
<div class="radio-group">
  <input type="radio" id="secondsetno" name="xsecondset" value="0" checked>
  <label for="secondsetno">No</label>
  <input type="radio" id="secondsetyes" name="xsecondset" value="1">
  <label for="secondsetyes">Yes</label>
</div>

接下来用JavaScript监听第一组的切换事件，根据选中的值控制第二组的启用/禁用状态：

// 获取两组单选按钮
const firstGroupRadios = document.querySelectorAll('input[name="xfirstset"]');
const secondGroupRadios = document.querySelectorAll('input[name="xsecondset"]');

// 定义控制第二组状态的函数
function toggleSecondGroup() {
  // 找到第一组中被选中的按钮
  const selectedOption = document.querySelector('input[name="xfirstset"]:checked');
  // 判断是否要禁用第二组：选中"Yes"（value为1）时禁用
  const isDisabled = selectedOption.value === '1';
  
  // 遍历第二组所有按钮，设置禁用状态
  secondGroupRadios.forEach(radio => {
    radio.disabled = isDisabled;
    // 可选：禁用时取消选中状态，避免提交数据时出现冲突
    if (isDisabled) radio.checked = false;
  });
}

// 给第一组每个按钮绑定切换事件
firstGroupRadios.forEach(radio => {
  radio.addEventListener('change', toggleSecondGroup);
});

// 页面加载时执行一次，确保初始状态正确
toggleSecondGroup();

这个逻辑很清晰：当第一组切换到"Yes"，第二组立刻被禁用；切回"No"时，第二组恢复可用。页面加载时的初始检查也保证了默认选中"No"时，第二组是正常启用的。

问题1：点击另一组单选按钮时禁用对方组 #

这个需求是让两组互斥——选了其中一组的任何选项，另一组就不能再选。实现思路是给两组都绑定切换事件，当某一组被选中时，直接禁用另一组。

还是用上面的HTML结构，JavaScript调整如下：

const firstGroupRadios = document.querySelectorAll('input[name="xfirstset"]');
const secondGroupRadios = document.querySelectorAll('input[name="xsecondset"]');

// 禁用指定组的工具函数
function disableRadioGroup(radios) {
  radios.forEach(radio => {
    radio.disabled = true;
    radio.checked = false; // 取消选中，避免数据冲突
  });
}

// 启用指定组的工具函数
function enableRadioGroup(radios) {
  radios.forEach(radio => {
    radio.disabled = false;
  });
}

// 第一组切换时：禁用第二组，确保自身启用
firstGroupRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    disableRadioGroup(secondGroupRadios);
    enableRadioGroup(firstGroupRadios);
  });
});

// 第二组切换时：禁用第一组，确保自身启用
secondGroupRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    disableRadioGroup(firstGroupRadios);
    enableRadioGroup(secondGroupRadios);
  });
});

// 可选：初始状态如果默认选中第一组，就禁用第二组
// disableRadioGroup(secondGroupRadios);

这样一来，用户点击第一组的任何按钮，第二组就会被锁死；点击第二组的按钮，第一组就无法操作。如果需要初始状态下只有一组可用，把最后一行的注释去掉即可。

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