Firefox 8 disabled=disabled

Question

I have just finished developing a web app but I have a really annoying annoying issue concerning the disabled property in firefox 8.

It appears as though disabled=disabled is not valid and therefore my hyperlink will not render as disabled.

I am trying this out on the following html code: I have tried a number of different jQuery commands just to make sure it was not a specific method of me trying to disable to hyperlink.

<a id="continue_link" href="/">Link</a>

<script type="text/javascript">
    //$('#continue_link').attr("disabled", "true");
    //$('#continue_link').attr("disabled", true);
    $('#continue_link').prop("disabled", true);
    $('#continue_link').prop("disabled", "true");
</script>

Answer 1

disabled is not (and never was) an attribute of the a element. To prevent a links default behaviour, the simplest method in jQuery is to use either return false or more specifically e.preventDefault().

Try this:

$("#continue_link").click(function(e) {
    if (myCondition == "something") {
        // stop the link
        e.preventDefault();
        alert("I'm sorry. I can't let you do that, Dave.");
    }
});

Answer 2

The following css style this will solve the issue in firefox

a[disabled] {
color: gray !important;
cursor: default !important;
text-decoration: none;
}

Answer 3

You want to either add this to the tag as an attribute:

onclick="return false;"

Or this in jQuery:

$(function(){
    $('#continue_link').click(function(){
        return false;
    });
});

disabled is not an attribute that is valid on an anchor tag.