Search code examples
htmlcross-browserinternet-explorer-9

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.


Solution

  • 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/