如何基于另一组单选框实现自动切换选中状态（jQuery方案）

需求说明 #

两组单选框需实现联动逻辑：

• 选中「One-Time」对应的单选框（ID：CRM_QFID_is_recur_radio）时，自动选中支付处理器单选框（ID：CRM_QFID_4_payment_processor_id）
• 选中「Monthly」对应的单选框（ID：CRM_QFID_month_is_recur_radio）时，自动选中支付处理器单选框（ID：CRM_QFID_6_payment_processor_id）

现有HTML结构 #

<div id="crm-radio-is_recur_radio-wrapper" class="crm-radio-wrapper crm-radio-wrapper-200px selected">
  <input class="" value="" type="radio" id="CRM_QFID_is_recur_radio" name="is_recur_radio">
  <label for="CRM_QFID_is_recur_radio">One-Time</label>
</div>

<input class="payment_processor_easy-pay crm-form-radio" value="4" type="radio" id="CRM_QFID_4_payment_processor_id" name="payment_processor_id">

<div id="crm-radio-is_recur_radio-wrapper" class="crm-radio-wrapper crm-radio-wrapper-200px">
  <input class="" value="month" type="radio" id="CRM_QFID_month_is_recur_radio" name="is_recur_radio">
  <label for="CRM_QFID_month_is_recur_radio">Monthly</label>
</div>

<input class="payment_processor_nach crm-form-radio" value="6" type="radio" id="CRM_QFID_6_payment_processor_id" name="payment_processor_id" checked="checked">

尝试的jQuery代码（未实现效果） #

$('input[name=is_recur_radio]').change(function() {
  $("input[name=is_recur_radio]:checked").attr("id") == "CRM_QFID_is_recur_radio" ? $('input[name=payment_processor_id][value=6]').prop("disabled", false) : $('input[name=payment_processor_id][value=6]').prop("disabled", true);
  $("input[name=is_recur_radio]:checked").attr("id") == "CRM_QFID_month_is_recur_radio" ? $('input[name=payment_processor_id][value=4]').prop("disabled", true) : $('input[name=payment_processor_id][value=4]').prop("disabled", false);
  $('input[name=payment_processor_id][value=6]').prop('checked', false);
  $('input[name=payment_processor_id][value=4]').prop('checked', false);
});

问题分析与正确实现 #

原代码问题 #

1. 逻辑顺序错误：最后两行强制将两个支付处理器单选框的checked设为false，直接覆盖了之前的选中逻辑，导致联动失效
2. 重复选择器调用：多次使用$("input[name=is_recur_radio]:checked")，冗余且效率低
3. 禁用逻辑冗余：两组禁用逻辑可合并优化

正确代码实现（含可选禁用逻辑） #

$('input[name="is_recur_radio"]').change(function() {
  // 获取当前选中的单选框ID
  const selectedId = $(this).attr('id');
  
  // 选中对应的支付处理器单选框
  if (selectedId === 'CRM_QFID_is_recur_radio') {
    $('#CRM_QFID_4_payment_processor_id').prop('checked', true);
    // 可选：禁用另一个支付选项
    // $('#CRM_QFID_6_payment_processor_id').prop('disabled', true);
  } else {
    $('#CRM_QFID_6_payment_processor_id').prop('checked', true);
    // 可选：禁用另一个支付选项
    // $('#CRM_QFID_4_payment_processor_id').prop('disabled', true);
  }
  
  // 可选：恢复所有支付选项的可用状态（如果不需要禁用则保留）
  $('input[name="payment_processor_id"]').prop('disabled', false);
});

极简版（仅实现选中联动） #

如果不需要禁用逻辑，代码可简化为：

$('input[name="is_recur_radio"]').change(function() {
  const isOneTime = $(this).attr('id') === 'CRM_QFID_is_recur_radio';
  $('#CRM_QFID_4_payment_processor_id').prop('checked', isOneTime);
  $('#CRM_QFID_6_payment_processor_id').prop('checked', !isOneTime);
});

初始化同步（可选） #

页面加载时，可根据默认选中的单选框同步支付处理器状态：

// 触发一次change事件，同步初始状态
$('input[name="is_recur_radio"]:checked').trigger('change');

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