Should the HTML Anchor Tag Honor the Disabled Attribute?

Question

If I create an HTML anchor tag and set the disabled attribute to true, I get different behaviors in different browsers (surprise! surprise!).

I created a fiddle to demonstrate.

In IE9, the link is grayed out and does not transfer to the HREF location. In Chrome/FF/Safari, the link is the normal color and will transfer to the HREF location.

What should the correct behavior be? Is IE9 rendering this incorrectly and I should implement some CSS and javascript to fix it; or is Chrome/FF/Safari not correct and will eventually catch up?

Thanks in advance.

Corinacorine

Answer 1

IE appears to be acting incorrectly in this instance.

See the HTML5 spec

The IDL attribute disabled only applies to style sheet links. When the link element defines a style sheet link, then the disabled attribute behaves as defined for the alternative style sheets DOM. For all other link elements it always return false and does nothing on setting.

http://dev.w3.org/html5/spec/Overview.html#the-link-element

The HTML4 spec doesn't even mention disabled

http://www.w3.org/TR/html401/struct/links.html#h-12.2

EDIT

I think the only way to get this effect cross-browser is js/css as follows:

#link{
    text-decoration:none;
    color: #ccc;
}

js

$('#link').click(function(e){
    e.preventDefault();
});

Example: http://jsfiddle.net/jasongennaro/QGWcn/

Determinate

Thanks for the explanation. The JS you showed is similar to what I'm doing for the other browsers. It also works with IE, so maybe I'll just go that direction. – Corinacorine

This answer refers to the wrong portions of the spec: dev.w3.org/html5/spec/Overview.html#the-link-element covers <link>, not the anchor element <a>. w3.org/html/wg/drafts/html/master/… shows that disabled is not specified for either one. – Embonpoint

Answer 2

I had to fix this behavior in a site with a lot of anchors that were being enabled/disabled with this attribute according to other conditions, etc. Maybe not ideal, but in a situation like that, if you prefer not to fix each anchor's code individually, this will do the trick for all the anchors:

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

And:

a[disabled] {
    color: gray;
    text-decoration: none;
}

Waterspout

Wow. This is fantastic, and should be marked as THE answer! How did this have zero upvotes?! I had started to actually modify the current answer to do what you are doing, having not initially read the 0 upvote answer! But why isn't your css selector a[disabled=disabled], and why not use the same selector in your jQuery. – Cooky

It should not be marked as THE answer because it is not one. You would need to run this code every time there is chance the 'disabled' attribute has changed anywhere in the document. – Roselynroseman

Jaroslav, you only would need to run this once time for each anchor. In any case, I agree it isn't the answer to the question in this post. I just thought it might be useful for someone else. – Waterspout

"a[disabled=disabled]" will only select <a disabled="disabled" …>, it won't select <a disabled …> (which is a valid way of writing the disabled attribute, if it were actually allowed on the a element) – Titbit

Answer 3

disabled is an attribute that only applies to input elements per the standards. IE may support it on a, but you'll want to use CSS/JS instead if you want to be standards compliant.

Tricuspid

Answer 4

The JQuery answer didn't work for me because my anchor tag is on a form and on my forms I use asp field validators and they just weren't playing nice. This led me to finding a pretty simple answer that doesn't require JQuery or CSS...

<a id="btnSubmit" href="GoSomePlace">Display Text</a>

You can disable the element and it should behave as input types do. No CSS needed. This worked for me in chrome and ff.

function DisableButton() {
    var submitButton = document.getElementById("btnSubmit");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

Of course you'll be doing a loop to disable all anchor tags in the DOM but my example shows how to do it for just one specific element. You want to make sure you're getting the right client id of your element but this worked for me, on more than one occasion. This will also work on asp:LinkButtons which end up being anchor tag elements when rendered in the browser.

Thorton