How to disable anchor using JavaScript?

Question

I have to disable anchor link depending on a condition if some data comes to that field it should work as a hyperlink and if that data does not come then the link should not be there? Any ideas on this are welcome.

Answer 1

Case 1:

To disable:

document.getElementById(id).style.pointerEvents="none";
document.getElementById(id).style.cursor="default";

To enable:

document.getElementById(id).style.pointerEvents="auto";
document.getElementById(id).style.cursor="pointer";

Case 2:

If you want the link to be gone (not just disable it):

document.getElementById(id).style.display="none";

to get it back:

document.getElementById(id).style.display="block"; //change block to what you want.

Case 3:

If you want to hide it preserving the space for it:

document.getElementById(id).style.visibility="hidden";

To get it back:

document.getElementById(id).style.visibility="visible";

Answer 2

I couldn't make sense of your question body, so I'll answer your question's title...

How to disable anchor using javascript ?

JavaScript

if (condition) {
    document.getElementsByTagName('a')[0].removeAttribute('href');
}

jQuery

...because everyone uses it, right?

if (condition) {
    $('a').first().removeAttr('href');
}

Answer 3

with jQuery

if(!data){
  $('#linkID').click(function(e) {
    e.preventDefault();
  });
}

with Prototype

if(!data){
  $('linkID').observe('click', function(event) { event.stop() });
}

Answer 4

<a href="javascript:check()">my link</a>

function check(){
var data =document.getElementById("yourdatafield").value;
if(data)
  window.location="your_link_location";

}

Answer 5

With jQuery:

To disable:

$('#anchor_tag').attr("disabled", true);

To enable:

$('#anchor_tag').attr("disabled", false);