如何实现单选按钮组的必选、禁用及限定选择逻辑？

API 探路者

2026-8-24

解决方案

这里是修改后的完整代码，完全满足你的三个需求：

</td>
</tr>
<tr>
  <td>
    <b>Phone Number :: </b> <input type="text" name="phone" id="Call" maxlength="15" placeholder="Phone Number">
    <b>Status in LN :: </b> 
    <input type="radio" name="gen" id="rd1" value="Pass"> Pass
    <input type="radio" name="gen" id="rd2" value="Fail"> Fail &nbsp;&nbsp;
    
    <b> InApp Verification ::</b>
    <input type="radio" name="gene" id="rd3" value="Pass" class="secondary-radio" disabled> Pass
    <input type="radio" name="gene" id="rd4" value="Fail" class="secondary-radio" disabled> Fail &nbsp;&nbsp;
    
    <b> ART Questions ::</b>
    <input type="radio" name="geen" id="rd5" value="Pass" class="secondary-radio art-radio" disabled> Pass
    <input type="radio" name="geen" id="rd6" value="Fail" class="secondary-radio art-radio" disabled> Fail &nbsp;&nbsp; <br><br>
    
    <b>OTP :: </b> Phone :: <input type="text" name="cell" id="txt-cell" placeholder="Cell Phone" disabled> OTP Code :: <input type="text" name="otp" id="otpc" placeholder="OTP Code" disabled>
    <input type="radio" name="genr" id="rd7" value="Pass" class="secondary-radio otp-radio" disabled> Pass
    <input type="radio" name="genr" id="rd8" value="Fail" class="secondary-radio otp-radio" disabled> Fail
    
    <input type="button" id="btnobc" value="Copy Outbound Data" onclick="obcall()">
  </td>
</tr>

<script>
// 获取所有元素
const statusPass = document.getElementById('rd1');
const statusFail = document.getElementById('rd2');
const inAppRadios = document.querySelectorAll('input[name="gene"]');
const artRadios = document.querySelectorAll('input[name="geen"]');
const otpRadios = document.querySelectorAll('input[name="genr"]');
const otpInputs = document.querySelectorAll('#txt-cell, #otpc');

// 监听Status单选的变化
statusPass.addEventListener('change', handleStatusChange);
statusFail.addEventListener('change', handleStatusChange);

// 监听InApp和OTP的单选变化，实现互斥
inAppRadios.forEach(radio => {
  radio.addEventListener('change', handleSecondaryRadioChange);
});
otpRadios.forEach(radio => {
  radio.addEventListener('change', handleSecondaryRadioChange);
});

function handleStatusChange() {
  if (statusPass.checked) {
    // 选Pass时，启用ART，OTP和InApp初始可用，但只能选一个
    enableRadios(artRadios);
    enableRadios(inAppRadios);
    enableRadios(otpRadios);
    enableInputs(otpInputs);
    // 初始状态下，OTP和InApp都没选，所以都可用
    resetSecondaryRadios();
  } else if (statusFail.checked) {
    // 选Fail时，禁用所有其他组，清空选中状态
    disableRadios(inAppRadios);
    disableRadios(artRadios);
    disableRadios(otpRadios);
    disableInputs(otpInputs);
    resetSecondaryRadios();
  }
}

function handleSecondaryRadioChange() {
  const inAppChecked = Array.from(inAppRadios).some(r => r.checked);
  const otpChecked = Array.from(otpRadios).some(r => r.checked);
  
  if (inAppChecked) {
    // 选了InApp，禁用OTP组
    disableRadios(otpRadios);
    disableInputs(otpInputs);
  } else if (otpChecked) {
    // 选了OTP，禁用InApp组
    disableRadios(inAppRadios);
  } else {
    // 都没选，恢复两个组的可用状态
    enableRadios(inAppRadios);
    enableRadios(otpRadios);
    enableInputs(otpInputs);
  }
}

// 工具函数：启用单选组
function enableRadios(radios) {
  radios.forEach(radio => radio.disabled = false);
}

// 工具函数：禁用单选组
function disableRadios(radios) {
  radios.forEach(radio => {
    radio.disabled = true;
    radio.checked = false;
  });
}

// 工具函数：启用输入框
function enableInputs(inputs) {
  inputs.forEach(input => input.disabled = false);
}

// 工具函数：禁用输入框
function disableInputs(inputs) {
  inputs.forEach(input => {
    input.disabled = true;
    input.value = '';
  });
}

// 重置所有次级单选的选中状态
function resetSecondaryRadios() {
  inAppRadios.forEach(r => r.checked = false);
  artRadios.forEach(r => r.checked = false);
  otpRadios.forEach(r => r.checked = false);
}

function obcall() {
  // 1. 验证Status是否必选
  if (!statusPass.checked && !statusFail.checked) {
    alert('请选择Status in LN');
    return;
  }

  let output = `\r\nPhone Number : [${document.getElementById("Call").value}], Status in LN :: `;
  output += statusPass.checked ? 'Pass' : 'Fail';

  if (statusFail.checked) {
    // 选Fail时，直接拼接结果
    output += '\r\nIn App :: 未选择（已禁用）';
    output += `\r\nMobile Number : [${document.getElementById("txt-cell").value}], OTP Code : [${document.getElementById("otpc").value}] 未选择（已禁用）`;
    output += '\r\nArt Questions :: 未选择（已禁用）';
  } else {
    // 选Pass时，验证是否符合选组要求
    const artChecked = Array.from(artRadios).some(r => r.checked);
    const inAppChecked = Array.from(inAppRadios).some(r => r.checked);
    const otpChecked = Array.from(otpRadios).some(r => r.checked);

    // 必须选ART，且选InApp或OTP其中一个
    if (!artChecked || (!inAppChecked && !otpChecked)) {
      alert('请选择ART Questions，以及InApp Verification或OTP其中一项');
      return;
    }

    // 拼接InApp结果
    output += '\r\nIn App :: ';
    output += inAppChecked ? (document.getElementById("rd3").checked ? 'Pass' : 'Fail') : '未选择';

    // 拼接OTP结果
    output += `\r\nMobile Number : [${document.getElementById("txt-cell").value}], OTP Code : [${document.getElementById("otpc").value}] `;
    output += otpChecked ? (document.getElementById("rd7").checked ? 'Pass' : 'Fail') : '未选择';

    // 拼接ART结果
    output += '\r\nArt Questions :: ';
    output += document.getElementById("rd5").checked ? 'Pass' : 'Fail';
  }

  // 追加到文本域
  document.casenotes.emminfo.value += output;
};
</script>

关键实现说明

1. 「Status in LN」必选项验证

在obcall函数开头先检查该组是否有选中项，如果没有直接弹出提示并终止执行，确保用户必须选择。

2. 选择「Fail」时禁用其他组

通过handleStatusChange函数，当选中Fail时，调用工具函数禁用所有次级单选按钮和OTP相关输入框，同时清空它们的选中状态和输入内容。

3. 选择「Pass」时的组限制

首先启用ART、InApp、OTP三组单选按钮
监听InApp和OTP的单选变化：如果选了其中一组，就禁用另一组，确保只能二选一
在提交验证时，强制要求必须选中ART，并且InApp或OTP其中一个被选中，不符合条件则弹出提示

额外优化

给相关元素添加了类名，方便批量操作
提取了工具函数，让代码更简洁易维护
页面加载时默认禁用所有次级组，避免用户未选Status就操作其他选项

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