22

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?

3
  • 1
    Have you tried styling it with CSS, e.g. cursor:default?
    – j08691
    Commented Oct 23, 2012 at 14:44
  • @j08691 I only want this done dynamically sometimes, but the jQuery .css solution clearly makes sense. Commented Oct 23, 2012 at 14:52
  • @Diodeus good point, I did some searching but was searching button specific stuff and didn't see the "disabled link" post. Commented Oct 23, 2012 at 14:52

3 Answers 3

32

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);
3
  • exactly what I wanted, thanks! Commented Oct 23, 2012 at 15:32
  • Would something like this work too .css("cursor", "pointer !important"); ? Using !important to override anything?
    – Kala J
    Commented Dec 11, 2014 at 15:44
  • @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 Commented Dec 12, 2014 at 20:26
5

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

5

You can set css like this:

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.