IE and Firefox compatible javascript to enable or disable an anchor tag

IE supports provides a half-baked implementation of the non-standard attribute 'disabled' on anchor tags (ie it changes it's color -even though it does not actually disable the anchor (if it has an href value). Firefox does not provide any support for it.

To add full 'disable' functionality to both browsers there are a couple of work arounds (hacks):

Override the onclick event of the anchor (to do nothing) and override the visual settings.

or, more simply

Add or remove the href attribute (both browsers will enable/disable the anchor with this method).

This causes both browsers to remove hyperlink behaviour: remove the underline, remove the hover mouse pointer (hand) and don't color the text blue. It does not, however cause the anchor to be greyed out (which you can easily do if you wish).

To allow this to work you need to store the existing href value - I just add another (non standard html) attribute eg href_bak.

Eg:

HTH

Tim

PS - I've just (9 May 06) updated the JS above - god knows what I was thinking with the original post :-s Thanks Heath K for the wake up call!

Share This Post:

posted on Thursday, January 19, 2006 12:54 PM

Feedback

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 1/24/2006 6:44 PM Brian

Why would you want to display a disabled anchor?

I would either choose to not display the anchor at all, or replace the onclick with some alert message e.g. "You must enter your name before clicking on this link"

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 2/28/2006 9:00 AM Jake

Thanks Tim, I'm making a web ap that uses a modal dialog, and I needed to disable all form elements and anchors any time it's visible. This did it for the anchors. Nice one!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/5/2006 6:14 AM Tim

John - try adding another element so you can debug this eg <input onclick="alert(xxx.attributes['href']);alert(xxx.attributes['href_bak'])"> where xxx is either of your anchor tags. It sounds to me like you're not resetting the href (setting it to blank disables the anchor tag) - so check what your storing and resetting.

hth
t

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/16/2006 5:15 PM rob

could this be used when calling a dhtml layer "popup" as well? i need to keep a user within the dhtml layer and not allow them to click any links outside of that layer. how could i modify the above code for such a situation?

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 5/30/2006 7:06 PM Paul

Thanks! I'm using this from ASP.NET code to make our application more Firefox friendly.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/20/2006 11:47 AM Tommy

Great code thanks i was trying to find a DOM way to this tricks.. your code was working first shot.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/1/2006 8:10 AM Raja

Thank you very much.Your code makes my life easier

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/6/2006 6:26 PM Jon

Thanks from me too!

I have header LinkButtons that need to be disabled in the default view, but fire sort events by category when in the search results view. When I disabled them I lost control of their appearance. This allows me to handle that too.

Thanks again!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/14/2006 4:06 AM WarrenG

Here's a hack I came up with to do this:

<span id="span1"><a href="myfile.html" id="link1">My file</a></span>

<script language="Javascript">
document.getElementById('span1').innerHTML = document.getElementById('link1').innerHTML
</script>

Basically, the Javascript replaces everything inside the span tag with everything between the a href tag, effectively stripping out the a href tag. Not pretty, but it works in both IE and FF.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/14/2006 4:19 AM WarrenG

You could also use a hidden span tag to temporarily store the value of the original span tag before you trash it. That way you could restore it if needed (enable it).

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/28/2006 12:34 AM kevin knight

reall cool and works great. i needed this for my page to prevent multiple crazy clicks from users while my ajax script is grabbing data from server. my anchor links are page numbers. now, they just have to wait while data is loading. sweet.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 10/12/2006 10:48 AM Mike S

Here is another hack

// create a style that is hidden
.hidden
{
position:absolute;
left:0px
top:-100px;
width:0px;
height:0px;
overflow:hidden;
}

// wrap your anchor tag in a span tag

<span id="anchorOff" class="hidden">
<a href="javascript:onclick=editCustomer();">Edit Customer</a>
</span>

// use an onChange event to call a function to make the anchor visible by changing the style sheet
function activateAnchor()
{
document.all["anchorOff"].className = 'visible';
}

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 1/21/2007 5:21 PM Sai

Thank you very much Tim , this is what iam exactly looking for .

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 2/15/2007 4:26 PM Grateful

Just wanted to give mad ups for the script...helped me tremendously!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/7/2007 10:22 AM Ravi Kishore

Thanks for the script...But, this doesn't work if the anchor tag has javascript function assigned to its onclick attribute. Even after disabling the anchor, javascript function still gets executed on click of the anchor tag. So, a hack of it, though completely based on the above hack, is here. I think it disables the link completely and enables it whenever you want...
function disableAnchor(obj, disable){
if(disable){
var href = obj.getAttribute("href");
var onclick = obj.getAttribute("onclick");
alert(onclick);
if(href && href != "" && href != null){
obj.setAttribute('href_bak', href);
}
if(onclick != null){
obj.setAttribute('onclick_bak', onclick);
obj.setAttribute('onclick', "void(0);");
}
obj.removeAttribute('href');

obj.style.color="gray";
}
else{
if(obj.attributes['onclick_bak']!=null)
obj.setAttribute('onclick', obj.attributes['onclick_bak'].nodeValue);
if(obj.attributes['href_bak']!=null)
obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
obj.style.color="blue";
}
}
Thanks,
Ravi

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/23/2007 7:59 AM gentong

hi all
i am new comer in web design, i had a problem with my design, i make my site with adobe photoshop and dreamweaver. i used firefox for default browser. when i open my browser in mozilla, my webs its fine, but when i open with IE, my webs its very mess.
can you all help me, for my trouble.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/26/2007 8:59 PM Amplus

Thanks a lot for the script, this is exactly what I was trying to do - disable LinkButton while postback is in progress. I had to modify the script to get this to work in Safari. I have tested this in IE6 and 7, Firefox 2, both on PC and Mac and Safari 2.0.4

function disableAnchor(objId, disable)
{
var obj = document.getElementById(objId);
if(obj != null)
{
if(disable)
{
var href = obj.getAttribute("href");
var onclick = obj.getAttribute("onclick");
//First we store previous value in a new attribute
if(href && href != "" && href != null)
{
obj.setAttribute('href_bak', href);
}
if(onclick != null)
{
obj.setAttribute('onclick_back', onclick);
obj.setAttribute('onclick', "void(0);");
}
obj.removeAttribute('href');
//obj.style.color="gray";
}
else
{
var hrefBack = obj.getAttribute("href_bak");
var onclickBack = obj.getAttribute("onclick_back");
if(onclickBack !=null )
{
obj.setAttribute('onclick', onclickBack);
obj.removeAttribute('onclick_back');
}
if(hrefBack !=null )
{
obj.setAttribute('href', hrefBack);
obj.removeAttribute('href_bak');
//obj.style.color="blue";
}
}
}
}

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/11/2007 3:24 PM Jason Miller

I've just done some rudimentary, old-school web stuff ... I put anchor tags on a page and it doesn't work in IE. Please advise, I have absolutely no idea why it won't work.

The specific page is www.sachemsfc.com/coaches.html

Each "coach bio" link goes to an anchor on the page.

Thank you so much for your help!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/11/2007 4:24 PM Tim Huffam

Hi Jason - the problem is occurring because your named anchors are empty. To fix insert something - at the very least a non-blank space eg:
Replace this:
<a name="JMiller"></a>
With this:
<a name="JMiller"> </a>

HTH
Tim

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 7/12/2007 1:38 PM Leah Marshall

Hi there,

You all sound as though you know what your doing. Would like to ask you for your help :)

I am currently creating a website, in Dreamweaver in which it looks fine with Internet Explorer but not in Firefox.

This may not be the first website iv tried to create through dreamweaver but i am still new and when you talk about anchors and things im totally lost.

Let alone where to put code :)

Please Help, You'd be a great help.

Leah

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 10/12/2007 1:27 PM Sanjeev

am not able to bring back or enable the link

I have something like this...

&lt;a href=&quot;#&quot; id=&quot;expand_lnk&quot; onclick=&quot;disableAnchor(this,true)&gt;Expand All&lt;/a&gt;|
&lt;a href=&quot;#&quot; id=&quot;collapse_lnk&quot; onclick=&quot;disableAnchor(this,true)&gt;Collapse All&lt;/a&gt;

on click of collapse i need to enable or make visible Expand All link and vise versa..
Pls help, i think only QA ppl can click twice/thrice... n times on a link ... :)

-Sanjeev

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 10/12/2007 1:41 PM sanjeev

i think i am not getting the handle or reference to the link

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 11/12/2007 3:25 AM Alex

I have one question: Why on eath those "eggheads" in Microsoft did not provide an attribute to disable that darn anchor element?!?

# Refined function 12/11/2007 7:15 AM Gareth Pursehouse

I liked the function posted above, and decided to fix it up a bit so it can be used a little more genericaly.

function ToggleAttribute( obj, DoEnable, TagName) {
if( DoEnable) {
var TagValue = obj.getAttribute("back[" + TagName + "]");
if( TagValue != null ) {
obj.setAttribute( TagName, TagValue);
obj.removeAttribute("back[" + TagName + "]");
}
} else {
var TagValue = obj.getAttribute("TagName");
if( TagValue != null ) {
obj.setAttribute("back[" + TagName + "]", TagValue);
}
obj.removeAttribute( TagName );
}
}

usage...

ToggleAttribute( DomObject, false, "href");
ToggleAttribute( DomObject, false, "onClick");
etc etc...
I set it so "false" means disable, and "true" means enable. seems a little more human-logical to me.
Anyways, the function stores all the backups inside of "back[?]", so if for some reason you needed to cycle through these with some other function, like a "RestoreAll" routine or something, it would be easy to identify the backups and their orig name.

I am using this function as of this moment for a list of anchors that need to be disabled/enabled based on a list.

good luck,
Gareth Pursehouse

# Above function fixed 12/11/2007 7:29 AM Gareth Pursehouse

sorry, the function I wrote above is wrong. use this.

function ToggleAttribute( obj, DoEnable, TagName) {
if( DoEnable) {
var TagValue = obj.getAttribute("back_" + TagName);
if( TagValue != null ) {
obj.setAttribute( TagName, TagValue);
obj.removeAttribute("back_" + TagName);
}
} else {
var TagValue = obj.getAttribute( TagName );
if( TagValue != null ) {
obj.setAttribute("back_" + TagName, TagValue);
}
obj.removeAttribute( TagName );
}
}

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 12/12/2007 2:27 AM Pradeep

Hi Friends,

I have one scenario like , iam using the DataList control for displaying the Hyperlinks , in that some of the links may be disabled at initial load. And iam doing something in the onclick of the hyperlink button at client side. For this iam handling link.disabled .

This is working fine with the IE's all versions.

But problem with FireFox,

Can anyone help me ..?

Thanks,
Pradeep Kumar

# IE and Firefox compatible javascript to enable or disable an anchor tag 1/13/2008 7:52 AM merdenoms

I got a link on my site, that I want to be almost invisible, except when the mouse hovers over it :)

I found this script, but it doesnt seems to work in IE, but its it does in FireFox

<SCRIPT language="JavaScript1.2">

</SCRIPT>

HELP

What can I do to make it work in both browsers? :)

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 1/13/2008 7:54 AM merdenoms

ups html worked here
@ equals a

<@ href="http://www.helpme.plz" target="_blank" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> HELP </@>

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 2/22/2008 12:35 AM Simply Me

Hi! I have this scenario. I have 5 links. on load of the index page only the first two links are enabled (ie., Home and Pretest) the user will click the pretest link whick launch a .swf file after the user has finished taking the test the pretest link will be disabled and enable the third link which "lesson". after the reading the lesson a button will be click to enable the next link and at the same time disable the lesson link. how do I achieved this?

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/17/2008 5:50 PM Forrest

Thanks, Tim!!!

Nice crisp code; works like a charm!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 5/16/2008 6:30 PM Prakash

Thanks Tim,

Ur solution , that remove attribute helps me to disable link button on my web form.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/13/2008 8:55 AM Thanks Tim

Worked perfectly in every browser except to IE.

This what I have changed:

From:
obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
To:
obj.setAttribute('href', '');

Have a great day.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/13/2008 8:58 AM Thanks Time

Wrong post above, this the correct one:

From:
obj.removeAttribute('href');
To:
obj.setAttribute('href','');

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/10/2008 7:06 AM ashish

Hi All, I am writing a .NET code with lots java scripting, its compatible with only IE so far and I want it to work on any browser so can anyone suggest me how to achieve this?

Thanks a lot.

Ashish
ashish.goel528@gmail.com

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/21/2008 11:12 AM Farrokh

Hi Ashish,

Take a look to this topic:
Migrate apps from Internet Explorer to Mozilla (http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd)

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 11/13/2008 11:19 PM riyaz

Hi,

The getElementById().click does not works with Mozilla and Safari but its working with IE6 & IE7.

Here's what i am trying to do -
I am trying to avoid the window being blocked by popup blockers

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function loadClick(id)
{
var obj = document.getElementById(id);
obj.href = "http://www.google.com";
obj.click();
}
</script>
</head>
<body onload="loadClick('usSearchLink');">
a
</body>
</html>

Does anyone has idea???

Thanks
Riyaz

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 6/30/2009 4:45 PM JZ

Thank you so much for this post. If I hadn't bumped into this one, it would've taken me a while to figure this out.

Thanks, Tim!!!

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 8/19/2009 1:41 PM Milton

onclick="disableAnchor(this,'verify')"

function disableAnchor(Check_Obj, Check_Id){
var Anchor_id = 's';
thisCheckbox = document.getElementById(Check_Id);
thisAnchor = document.getElementById(Anchor_id);
if(thisCheckbox.checked){
//alert('Y1');
Check_Obj.setAttribute('href',''); //Check_Obj.attributes['href_bak'].nodeValue
Check_Obj.style.color="blue";
//alert('Y2');
}
else{
//alert('N1');

var href = Check_Obj.getAttribute('href');
//alert(href);
if(href && href != "" && href != null){
Check_Obj.setAttribute('href_bak', href);
}
Check_Obj.removeAttribute('href');
Check_Obj.style.color="gray";

//alert('N2');
}
}

I have a href link called "Submit" so I want to enable/disable it based on the checkbox click......plzzz help me out...I am getting no errors on above code....but its not working either....thnks

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 9/9/2009 8:50 AM dipesh

Thanks for the resolutions. very helpful.. :)

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 10/7/2009 3:39 PM Jay

This is exactly what I was looking for.
Thanks for the solution.
:)

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 1/13/2010 12:58 PM Vijay

Good Work

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 2/20/2011 9:26 PM Seo Orange County

Thank you for posting this blog. it really help me alot.. very informative blog I should say.. thanks for your tips! God bless!
orange county seo

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 2/25/2011 2:47 AM New York Dress

I just wanted to type a simple message so as to appreciate you for the wonderful concepts you are posting at this website. My particularly long internet search has finally been rewarded with brilliant strategies to talk about with my companions. I would believe that we readers are truly fortunate to exist in a remarkable network with many wonderful professionals with great principles. I feel rather grateful to have encountered your web site and look forward to really more amazing times reading here. Thank you again for everything.Bookmarked!new york dress

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 3/11/2011 9:45 PM Pushparaj Samant

Thanks Tim, That saved alot of effort. Really appreciate ur help

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 4/27/2011 6:08 AM Arman McHitaryan

Thanks, guys, the scripts helped a lot in solving a similar bug in my project. Seems like many people experience the issue with the div element in IE and Firefox.

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 7/1/2011 5:01 AM EverAfter.com

I just like the helpful info you provide to your articles. I will bookmark your weblog and test once more here regularly. I’m slightly sure I’ll be informed many new stuff proper here! Best of luck for the next!

Regards

EverAfternow.com

# re: IE and Firefox compatible javascript to enable or disable an anchor tag 10/26/2011 7:53 AM theseeker

I m a newbie in javascript. I d like to disable/enable a link after a click on a button for a determined time

Tim Huffam

News

Archives

Post Categories

Interesting Blogs/Links

Feedback