jQuery（如果已禁用）-不起作用

Question

我需要檢查單擊時是否禁用了選擇器。

<a href="#" class="btn btn-primary sendOrderToSage" data-id="97" disabled="disabled">Send To Sage</a>

我當前無法使用的代碼是：

$('.sendOrderToSage').on('click',function(e){
    e.preventDefault();
    if($(this).is(':disabled') == true){
        return false;
    }
 /* Continue function */
 });

我也嘗試了$('.sendOrderToSage:not(:disabled)').....但這與上述嘗試的結果相同。

Answer 1

disabled屬性/屬性對input,select等元素有效。在錨標記中， disabled只是另一個屬性。 因此，如果要獲取它，則需要使用attr（）

 $('.sendOrderToSage').on('click', function(e) { e.preventDefault(); if ($(this).attr('disabled') == 'disabled') { return false; } /* Continue function */ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#" class="btn btn-primary sendOrderToSage" data-id="97" disabled="disabled">Send To Sage</a> 

與:disabled

在$(this).is(':disabled') ，為<a>返回的$(this).is(':disabled')始終為false，因為它是錨點的無效屬性。

 $('.sendOrderToSage').on('click mousedown', function(e) { e.preventDefault(); alert($(this).is(':disabled')); if ($(this).attr('disabled') == 'disabled') { return false; } /* Continue function */ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#" class="btn btn-primary sendOrderToSage" data-id="97" disabled="disabled">This will always return false.</a><br/> 

Answer 2

與您的代碼的問題是， a元素不能被禁用 。 disabled是無效的屬性a元素 。

如果你想有一個對屬性a表示，它不應該是可點擊元素，你唯一有效的HTML選擇是使用一個data-*屬性來代替。 然后，您可以使用以下方法“禁用”它：

$(".sendOrderToSage").attr("data-disabled", "Y");

並使用以下命令“啟用”它：

$(".sendOrderToSage").removeAttr("data-disabled");

您的點擊功能變為：

$('.sendOrderToSage').on('click', function(e) {
  e.preventDefault();
  if ($(this).attr('data-disabled')) {
    return false;
  }
  /* Continue function */
});

現場示例 ：

 $('.sendOrderToSage').on('click', function(e) { e.preventDefault(); if ($(this).attr('data-disabled')) { alert("Click was stopped"); return false; } /* Continue function */ }); $(document.body).on("click", "a.sendOrderToSage", function() { alert("Click was not stopped"); }); $("#togglebox").on("click", function() { if (this.checked) { $(".sendOrderToSage").attr("data-disabled", "Y"); } else { $(".sendOrderToSage").removeAttr("data-disabled"); } }); 

 <div> <label> <input type="checkbox" id="togglebox" checked>Disable the link </label> </div> <a href="#" class="btn btn-primary sendOrderToSage" data-id="97" data-disabled="disabled">Send To Sage</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>