how to disable anchor tag in jquery?

Question

Here,How to disable this link by using button tab?Is it possible?

 <a href="http://www.google.com">
    <button>click here for go to yahoo</button>
</a>

Answer 1

Give ids and disable at the run-time.

HTML:

<a id="disableanchor" href="http://www.google.com">
        <button id="buttononclickdisable">click here for go to yahoo</button>
</a>

Javascript:

$('#buttononclickdisable').click(function(){
     $('#disableanchor').attr("disabled","disabled");
});

Or remove the 'click' event listener.

$("#anchorid").off('click');

Answer 2

Surprisingly it is not such a straightforward task since anchor tags do not have a disabled attribute (on the contrary of input tags, select tags, textarea tags, etc.).

The workaround I often use is first to define a class with pointer-events set to none (CSS):

.disable-click{
    pointer-events:none;
}

Then I use Jquery (1.0+) to disable/enable the "clickability" of the anchor tag in question by adding/removing the class previously defined:

$("#my-a-tag-id").addClass("disable-click");
$("#my-a-tag-id").removeClass("disable-click");

Answer 3

To essentially disable it, you could likely do:

$("a[href='http://www.google.com']").click(function(e) {
  e.preventDefault();
});

But it would be clearer and more precise if you added a class or id and targeted that in the selector. And what this really does is prevent the action from taking place, it doesn't handle management of state, hence making it obvious that the link is not going to work when clicked.

Answer 4

You can something like as follow:

Remove the 'href' attribute from the anchor tag ($target will be your anchor tag):

$target.removeAttr('href');