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

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/