Question

我有以下WooCommerce生成的代码来显示可用的送货方式：

<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"  checked='checked' />
<label for="shipping_method_0_flat_rate5">Call 386-410-4757 for Shipping Quote</label>                  </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_wf_shipping_uspsd_express_mail" value="wf_shipping_usps:D_EXPRESS_MAIL" class="shipping_method"  />
<label for="shipping_method_0_wf_shipping_uspsd_express_mail">Priority Mail Express&#8482; (USPS): <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>22.95</span></label>                    </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_wf_shipping_uspsd_priority_mail" value="wf_shipping_usps:D_PRIORITY_MAIL" class="shipping_method"  />
<label for="shipping_method_0_wf_shipping_uspsd_priority_mail">Priority Mail&#0174; (USPS): <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>6.45</span></label>
</li>
</ul>

如果选择了第一个单选按钮，我需要做的是禁用单选按钮2和3。

我试过这个无济于事：

$('.shipping_method').click(function(){
   if(this.value == 'flat_rate:5' && this.checked){
       console.log($('input[value=wf_shipping_usps:D_EXPRESS_MAIL], input[value=wf_shipping_usps:D_PRIORITY_MAIL]'));
        $('input[value=wf_shipping_usps:D_EXPRESS_MAIL], input[value=wf_shipping_usps:D_PRIORITY_MAIL]').prop('disabled', true);
   }
   else{
      $('.shipping_method').not(this).prop('checked', false).prop('disabled', false);
   }
});

非常感谢任何帮助！

谢谢，

辛西娅

Answer 1

WooCommerce通过AJAX加载很多东西，这意味着你需要使用事件委托。

此外，您可能会误解jQuery函数内部this所代表的内容，因此我已经重新设计了一些支票。

最后，您希望禁用所有其他输入，而不是专门识别它们，我已经修改了代码以禁用ALL但是需要的是：

// WordPress loads jQuery in noConflict mode, so
// First be sure you can use the $ by wrapping inside of a
// noConflict-safe document ready
jQuery(function($) {
    // Event delegation
    $(document).on('click', '#shipping_method input', function() {
       // Use jQuery .val() and jQuery .is() to check if it's the correct item
       if( $(this).val() == 'flat_rate:5' && $(this).is(':checked') ) {
           $('input.shipping_method').not('[value="flat_rate:5"]').prop('disabled', true);
       } else {
           $('input.shipping_method').not('[value="flat_rate:5"]').prop('checked', false).prop('disabled', false);
       }
    });
});

如果您遇到问题，请务必检查浏览器的开发者控制台，并详细报告问题的详细信息，否则无法提供帮助。

如果选中特定的单选按钮，如何禁用剩余的单选按钮？

1 个答案: