How to disable the hyperlink based on the condition through Javascript

Question

How to disable the hyperlink based on the condition

 var mydiv = document.getElementById("myDiv"); 
 var aTag = document.createElement('a'); 
 aTag.setAttribute('href',"yourlink.htm"); 
 aTag.innerHTML = "link text"; 
 mydiv.innerHTML=""; 
 mydiv.innerHTML=aTag; 

say i need to disable my aTag here.

Based on logged on user i need to disable or enable..

• Daniel Attfield: Based on what condition?
• Oleg V. Volkov: From UX POV, users are hardly used to disabled links, so I'd recommend against it. If you need something disabled, it most likely should've been button.

Answer 1

This should work

 if(condition)
 disableLink();
else
 showLink();
function disableLink()
 {
 document.getElementById('Link1').disabled=true;
 document.getElementById('Link1').removeAttribute('href'); 
 document.getElementById('Link1').style.textDecoration = 'none';
 document.getElementById('Link1').style.cursor = 'default';
 }
 function showLink()
 {
 document.getElementById('Link1').disabled=false;
 //assign href dynamically
 document.getElementById('Link1').href = "somepage.html";
 document.getElementById("Link1").style.textDecoration = "underline";
 document.getElementById("Link1").style.cursor = "hand";
 }

• pavan: If i am not wrong Link1 is the id of the hyperlink right? But in the sample code as shown above i need to disable the aTag link. I tried the code provided above, but it was not effecting. Please suggest.
• DJDave: Isn't "assign href dynamically" a bit vague? You will lose the target URL when you call removeAttribute, so how do you get it back in the call of showLink? How about storing it before wiping it? There may be a better attribute to use than src but it worked for me: document.getElementById('Link1').src = document.getElementById('Link1').href

Answer 2

You can disable the link by setting the disabled attribute (not valid on anchor elements, though it works in some cases).

Test setup for disabled attribute on anchors: http://jsfiddle.net/TgjnM/

Preferably, you can remove the link altogether and replace it with the text it contains. To replace the link with plain text, you would set the innerHTML of mydiv to the text (thus removing the hyperlink).

If the link can be toggled on/off, consider a form element (not a hyperlink) as @Oleg V. Volkov suggested in the comments. If it is a one-time decision (i.e. it won't be happening multiple times per page), I would replace the link with text.

Based on logged on user i need to disable or enable..

In that case, I would render the page differently on the server, not in the web browser.