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.

score 24 · Answer 1 · edited Apr 20 '15 at 01:58

24

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

edited Apr 20 '15 at 01:58

delliottg

3,732
2
35
48

answered Apr 08 '15 at 17:50

Jahid

19,822
8
86
102

2

This is nice because it works in cases where you have an href or an onclick. – MDM Jul 16 '18 at 18:18
you rock to the mx Jahin Saab. This is the only solution that worked for me. Would love if someone can explain why the prop(disable...) method doesn't work for anchors. – Desper Mar 18 '22 at 08:09

score 19 · Answer 2 · edited Apr 06 '11 at 09:14

19

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

edited Apr 06 '11 at 09:14

Matt

72,564
26
147
178

answered Apr 05 '11 at 13:48

alex

460,746
196
858
974

3

I think *even jQuery* might fail with `removeAtt` :) – thirtydot Apr 05 '11 at 14:29
1

@thirtydot Whoops. I think I forgot an `r` :) – alex Apr 05 '11 at 14:30
2

This also works with document.getElementById(_yourIdHere_).removeAttribute('href'); – Solid1Snake1 Oct 23 '17 at 22:15

Mithun Sreedharan · Answer 3 · 2011-04-05T13:55:24.093

2

with jQuery

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

with Prototype

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

edited Apr 05 '11 at 13:55

answered Apr 05 '11 at 13:49

Mithun Sreedharan

47,989
69
178
233

2

Why not with another framework the OP didn't mention, such as MooTools? :P – alex Apr 05 '11 at 13:52
1

The point I was trying to make is that you answered with library code when the OP didn't specify a library. – alex Apr 05 '11 at 13:57
@alex yeah, i know to do it only with jQuery ;-) – Mithun Sreedharan Apr 05 '11 at 13:59
5

Highest voted answer when the OP doesn't even mention jQuery... ridiculous. – Matt Apr 05 '11 at 14:02

score 1 · Answer 4 · answered Apr 05 '11 at 13:59

1

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

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

}

answered Apr 05 '11 at 13:59

Anupam

7,870
3
42
62

I wonder what will happen if data is null.. – Mithun Sreedharan Apr 05 '11 at 14:01
@Mithun :we can check that in the if statement if required – Anupam Apr 05 '11 at 14:04

score -3 · Answer 5 · edited Dec 14 '15 at 12:56

-3

With jQuery:

To disable:

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

To enable:

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

edited Dec 14 '15 at 12:56

Jon Surrell

8,854
7
47
53

answered Dec 14 '15 at 12:49

Maria

11
1

1

This wont work on Anchors. – Rafael Herscovici Oct 08 '19 at 11:04

How to disable anchor using JavaScript?

5 Answers5

JavaScript

jQuery