如何使用 jquery 启用或禁用基于 2 个其他单选按钮的单选按钮?
How to enable or disable a radio based on 2 other radio buttons using jquery?
我有 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>
我想要的结果是,当我 select Single 时, Payment 无线电应该被禁用。
当我select每月时,支付收音机应该被启用
这是我尝试过的并且能够成功禁用 payment 收音机,但是在 select Monthly[=27] 时无法启用它=].任何帮助,将不胜感激。谢谢
$('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);
}
});
因为您的两个无线电名称即: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>
我有 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>
我想要的结果是,当我 select Single 时, Payment 无线电应该被禁用。
当我select每月时,支付收音机应该被启用
这是我尝试过的并且能够成功禁用 payment 收音机,但是在 select Monthly[=27] 时无法启用它=].任何帮助,将不胜感激。谢谢
$('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);
}
});
因为您的两个无线电名称即: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>