允许单击但禁用链接

Question

I have a link that I needs to be disabled based on some condition. So I have used CSS way of disabling it as follows:

.disabled {
  pointer-events: none
}

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

But, as expected it has disabled all events (like: click, hover, etc). I want to put my own click event on the link if it's disabled, eg:

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

How can this be achieved?

Answer 1

Try this:

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

I think you should use jQuery & no need to use css

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

Answer 3

If you set pointer events to none, you can't bind any events to the link. It would be better to just dynamically change the output with a function.

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