How to disable anchor using JavaScript? [duplicate]

This question already has answers here: How do I disable a href link in JavaScript? (20 answers) How do you make an anchor link non-clickable or disabled? (19 answers) Closed 6 years ago.

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.开发者_如何学Go

---

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";

---

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');
}

---

with jQuery

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

with Prototype

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

---

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

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

}

---

With jQuery:

To disable:

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

To enable:

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