Question

Possible Duplicate:
jQuery mouseover a disabled link, how do I change the cursor so it doesn’t appear clickable?

I have a button that I’m attempting to disable in certain cases where its function is unnecessary or impossible. It is one of many buttons on the page, and I only want to disable this specific button.

The effect I’m looking for is to have it greyed out, unclickable, and for the mouse pointer to not change to the hand pointer when hovering over the button.

I’ve successfully succeeded at the first 2 objectives, but am unsure how to make the 3rd one happen. When I searched I saw suggestions for globally disabling this behavior, but not for a specific button.

Here’s what I have so far.

if(buttonIsDisabled)
{
    var btnid ="#button"+index;
    $(btnid).attr("disabled","disabled").fadeTo(500,0.2);
}

This successfully makes the button unclickable and fades it out, but in Firefox and Chrome it still shows a hand icon when hovering. IE8 (which I also have to support) correctly disables the hand and shows the cursor.

Any suggestions on how to enforce IE’s behavior in Chrome and Firefox?

Answer 1

You can set the “cursor” rule to a value of “default”. In jQuery, you can use the css method.

$(btnid).css("cursor", "default");

Since you already are using $(btnid), you can just chain the calls, like so:

$(btnid).attr("disabled","disabled").css("cursor", "default").fadeTo(500,0.2);