Prevent Cursor Change to hand on disabled button

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?

Solution 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);

Solution 2

You could also set a style of cursor: default to the button.

Solution 3

You can set css like this:

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

Comments

[j08691]

Have you tried styling it with CSS, e.g. cursor:default?

[Ben McCormick]

exactly what I wanted, thanks!

[Kala J]

Would something like this work too .css("cursor", "pointer !important"); ? Using !important to override anything?

[Seth Flowers]

@KalaJ - yes it should work, but the only reason you should do that is if you are trying to override an override. The css function in jQuery sets fields on the style property of the matched dom element. This should have the highest specificity by default, so there is no need for !important, unless a lower specificity matched rule is also using !important. If all of that sounds mumbo-jumbo, a good rule of thumb is to use !important sparingly. See css-tricks.com/specifics-on-css-specificity and css-tricks.com/when-using-important-is-the-right-choice