如何用JavaScript实现禁用违规单选按钮组合并触发提示

以下是满足需求的完整代码，包含HTML结构和JavaScript逻辑：

HTML 结构 #

<form>
  <div>
    <h3>选择商品</h3>
    <label>
      <input type="radio" name="product" value="9" checked>
      Starlight (USD 9)
    </label>
    <br>
    <label>
      <input type="radio" name="product" value="15">
      Starlight Plus (USD 15)
    </label>
  </div>

  <div style="margin-top: 15px;">
    <h3>选择支付方式</h3>
    <label>
      <input type="radio" name="payment" value="paypal">
      PayPal
    </label>
    <br>
    <label>
      <input type="radio" name="payment" value="bank" checked>
      Bank Transfer
    </label>
  </div>
</form>

JavaScript 逻辑 #

// 获取所有相关单选按钮元素
const productRadios = document.querySelectorAll('input[name="product"]');
const paymentRadios = document.querySelectorAll('input[name="payment"]');

// 定义检查并处理违规组合的函数
function checkPaymentRestriction() {
  // 获取当前选中的商品价格
  const selectedProductPrice = parseInt(Array.from(productRadios).find(r => r.checked).value);
  // 获取当前选中的支付方式
  const selectedPayment = Array.from(paymentRadios).find(r => r.checked).value;

  // 判断是否触发违规规则：低价商品 + PayPal
  if (selectedProductPrice < 10 && selectedPayment === 'paypal') {
    // 1. 弹出提示
    alert('价格低于10美元的商品无法使用PayPal支付，请选择其他支付方式');
    // 2. 强制切换到合法支付方式（Bank Transfer）
    document.querySelector('input[name="payment"][value="bank"]').checked = true;
  }
}

// 给商品选择按钮添加变更监听
productRadios.forEach(radio => {
  radio.addEventListener('change', checkPaymentRestriction);
});

// 给支付方式选择按钮添加变更监听
paymentRadios.forEach(radio => {
  radio.addEventListener('change', checkPaymentRestriction);
});

功能说明 #

• 当用户选择**Starlight（USD 9）**后，若试图选择PayPal，会立即弹出提示，并自动将支付方式切回Bank Transfer
• 若用户先选了PayPal，再切换到Starlight，同样会触发提示并强制恢复合法支付方式
• 高价商品（Starlight Plus）不受限制，可自由选择任意支付方式

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