如何使用 jquery 启用或禁用基于其他 2 个单选按钮的单选？

Posted 2023-03-27

【中文标题】如何使用 jquery 启用或禁用基于其他 2 个单选按钮的单选？

【英文标题】：How to enable or disable a radio based on 2 other radio buttons using jquery?

【发布时间】：2021-04-07 03:51:44

【问题描述】：

我有 3 个单选按钮

<div>
<input class="crm-form-radio" value type="radio" id="CIVICRM_QFID_is_recur_radio" name="is_recur_radio">
<label for="CIVICRM_QFID_is_recur_radio">Single</label>
</div>

<div>
<input class="crm-form-radio" value="month" type="radio" id="CIVICRM_QFID_month_is_recur_radio" name="is_recur_radio">
  <label for="CIVICRM_QFID_month_is_recur_radio">Month</label>
</div>

<div>
<input class="payment_processor_gocardless crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id" >
<label for="CIVICRM_QFID_5_payment_processor_id">Payment</label>

</div>

我想要的结果是，当我选择 Single 时，应该禁用 Payment 单选。

当我选择每月时，应该启用付款单选

这是我尝试过并且能够成功禁用支付单选，但在选择每月时无法启用它。任何帮助，将不胜感激。谢谢

$('input[name=is_recur_radio][id=CIVICRM_QFID_is_recur_radio]').change(function()
if ($("input[name=is_recur_radio]:checked").attr("id")=="CIVICRM_QFID_is_recur_radio") 
    $('input[name=payment_processor_id][value=5]').prop("disabled", true);
    
  );


$('input[name=is_recur_radio][value=month]').change(function()
if ($("input[name=is_recur_radio]:checked").attr("value")=="CIVICRM_QFID_month_is_recur_radio") 
    $('input[name=payment_processor_id][value=5]').prop("disabled", false);
      
);

【问题讨论】：

你有什么相关的 html 可以给我们看吗？

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

我可以提供实际页面的 URL，如果有帮助的话@DavidsaysreinstateMonica 谢谢

不，不要链接到该页面 - 因为一旦您解决了问题或重新组织您的网站 - 问题就会消失，我们的帮助对未来的访问者毫无用处。而是生成一个“minimal reproducible example”来展示您的问题。

感谢@DavidsaysreinstateMonica 添加了 HTML

【参考方案1】：

由于您的两个无线电名称，即：monthly and single 相同，您可以只使用一个 change 事件处理程序并根据条件更改值。

演示代码：

$('input[name=is_recur_radio]').change(function() 
  //check for id and add or remove disabled
  $("input[name=is_recur_radio]:checked").attr("id") == "CIVICRM_QFID_is_recur_radio" ? $('input[name=payment_processor_id][value=5]').prop("disabled", true) : $('input[name=payment_processor_id][value=5]').prop("disabled", false);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="crm-form-radio" value type="radio" id="CIVICRM_QFID_is_recur_radio" name="is_recur_radio">
  <label for="CIVICRM_QFID_is_recur_radio">Single</label>
</div>

<div>
  <input class="crm-form-radio" value="month" type="radio" id="CIVICRM_QFID_month_is_recur_radio" name="is_recur_radio">
  <label for="CIVICRM_QFID_month_is_recur_radio">Month</label>
</div>

<div>
  <input class="payment_processor_gocardless crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id">
  <label for="CIVICRM_QFID_5_payment_processor_id">Payment</label>

</div>

【讨论】：

如果已选择付款，当我从每月切换到单一时，如何清除付款单选？谢谢

你好试试这样$('input[name=payment_processor_id][value=5]').removeAttr('checked')