禁用包含href =＆＃34; javascript：;＆＃34;的链接直到选择选项

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>