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..

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. — Oleg V. Volkov
– Oleg V. Volkov, Commented Aug 10, 2012 at 11:43

thecodejack · Accepted Answer · 2012-08-10 11:48:00Z

2

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

answered Aug 10, 2012 at 11:48

thecodejack

13.5k11 gold badges47 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pavan Over a year ago

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 Over a year ago

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;

Tim M. · Accepted Answer · 2012-08-10 12:02:15Z

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.

edited Aug 10, 2012 at 12:02

answered Aug 10, 2012 at 11:39

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Collectives™ on Stack Overflow

How to disable the hyperlink based on the condition through Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related