CODEWITHSUNDEEP
htmlcross-browserinternet-explorer-9
David Hoerster
David Hoerster

Reputation: 28701

Should the HTML Anchor Tag Honor the Disabled Attribute?

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.

Upvotes: 27

Views: 36314

Answers (4)

Jabare Mitchell
Jabare Mitchell

Reputation: 141

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.

Upvotes: 1

hernant
hernant

Reputation: 351

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

Upvotes: 14

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 14

Karmic Coder
Karmic Coder

Reputation: 17949

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.

Upvotes: 10

Related Questions