0

我有一个链接需要禁用，直到从选择框中进行选择

<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>

哪个有效，但我宁愿让链接一直可见，只是不可点击。谢谢

4

2 回答 2

5

在您的链接处理程序上，您可以检查是否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
});

演示第二个方法

于 2012-09-04T12:28:38.280 回答
2

您可以使用此脚本禁用/启用按钮

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

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

       }
    });
    </script>
于 2012-09-04T12:28:52.117 回答