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.

Answer 1

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

Answer 2

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/