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

试试这个：

$(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 2

我认为你应该使用jQuery＆amp;无需使用css

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

Answer 3

如果将指针事件设置为none，则无法将任何事件绑定到链接。使用函数动态更改输出会更好。

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

允许单击但禁用链接

3 个答案: