如果選中某個單選按鈕，如何禁用剩餘的單選按鈕？

我有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); 
    } 
});

任何幫助，將不勝感激！

感謝，

辛西婭通過AJAX，這意味着

來源

2016-11-23 Cynthia

由於只能從指定的組中選擇1個單選按鈕，因此禁用其他組件似乎有點多餘 - 並且會讓用戶煩惱，因爲如果他們誤點擊，他們將無法更改選擇。 –

它需要完成。我在Woocommerce有一些產品，因爲運輸不能在線計算，所以他們需要打電話發貨。僅限於那些產品，Call for Shipping顯示爲運費選項。 – Cynthia

WooCommerce加載很多東西你需要使用事件代表團。

此外，您可能會誤解this代表jQuery函數的內部，因此我重新編寫了一些檢查。

最後，您希望所有其他輸入禁用，因此而不是確定他們具體地講，我已經修改了代碼，以禁用所有，但所需的一個：

// 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); 
     } 
    }); 
});

如果你有問題，一定要檢查您的瀏覽器的開發者控制檯，並報告有關該問題的詳細信息，否則無法提供幫助。

來源

2016-11-23 23:55:28

如果選中某個單選按鈕，如何禁用剩餘的單選按鈕？

回答

相關問題