禁用包含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
});

演示第二种方法