禁用具有href =「javascript :;」的鏈接直到選項被選中

Question

我有一個鏈接，我需要禁用，直到選擇從一個選擇框

<select id="shippingSelect" onchange="simpleCart.update();"> 
        <option value="nothing" selected="selected">Choose Shipping Location</option> 
        <option value="uk">UK - FREE</option> 
        <option value="world">Rest of World + £2.00</option> 
       </select> 

<a href="javascript:;" class="simpleCart_checkout"> Place Order </a> 

如何禁用的地方順序鏈接，直到客戶選擇託運地點做？

這是我的時刻：

<script> 
    $('#shippingSelect').change(function() { 
     if ($(this).val() != "nothing") { 

      $('.place_order').slideDown(); 
     } else { 
      $('.place_order').slideUp(); 

     } 
    }); 
    </script> 

哪些工作，但我寧願有鏈接可見所有的時間只是不可點擊。由於

Answer 1

在你的鏈接處理，如果不同，以nothing東西被選爲

$('a.simpleCart_checkout').click(function(e) { 
    if ($('#shippingSelect').val() == 'nothing') { 
     e.preventDefault(); // disable link navigation 
    }   
    // your logic for the case that something is selected 
}); 

在任何情況下，你可以檢查一下，如果增加一些視覺指示該鏈接的像灰什麼的字體禁用它會更好並且在組合框上選擇有效元素時將其刪除。

另一種方法是採取鏈接樣式考慮

HTML

<a href="javascript:;" class="simpleCart_checkout disabled"> Place Order </a> 

CSS

.disabled 
{ 
    color: #AAA 
} 

JS

$('#shippingSelect').change(function() { 
    if ($(this).val() == "nothing") { 
     $('a.simpleCart_checkout').addClass('disabled'); 
    } 
    else { 
     $('a.simpleCart_checkout').removeClass('disabled'); 
    } 
}); 

$('a.simpleCart_checkout').click(function(e) { 
    if ($(this).hasClass('disabled')) { 
     e.preventDefault(); // disable link navigation 
    }   
    // your logic for the case that something is selected 
}); 

DEMO 2nd APPROACH

Answer 2

您可以使用此腳本來禁用/啓用按鈕

<script> 
    $('#shippingSelect').change(function() { 
     if ($(this).val() != "nothing") { 

      $('.place_order').removeAttr("disabled"); 
     } else { 
      $('.place_order').attr("disabled", "disabled"); 

     } 
    }); 
    </script>