允許點擊但禁用鏈接

Question

我有一個鏈接，我需要根據某些條件禁用。所以我用CSS方式如下其禁用：

.disabled { 
    pointer-events: none 
} 

if(some condition) { 
    jQuery("#some_link_id").addClass("disabled"); 
} 

但是，正如預期已禁用所有的事件（如：單擊，懸停等）。如果它被禁用，我想在鏈接上放置自己的點擊事件，例如：

jQuery("#some_link_id.disabled").click(function(){ 
    alert("Link is disabled"); 
}); 

這是如何實現的？

Answer 1

我認爲你應該使用jQuery &沒有必要使用CSS

$("a").click(function(event){ 
    event.preventDefault(); 
    alert("Link is now disabled"); 
}); 

Answer 2

試試這個：

$(document).ready(function() { 
 
    $(".disabled").click(function() {//all elements with .disabled class 
 
     return false;//disable the link 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="disabled" href="http://www.instructables.com">Link text</a>

Answer 3

如果設置指針事件無法比擬的，你可以」將任何事件綁定到鏈接。用一個函數動態地改變輸出會更好。

$('#somelink').click(function(e){ 
     if($(this).hasClass('disabled')){ 
      // Do this 
     } else { 
      // Do that 
     } 
});