How can I make jQueryUI icons appear disabled?

Is there a way to disable the icons in jquery? For example I am using ui-icon-circle-triangle-w and ui-icon-circle-triangle-e for "prev/next" and I would like to disable "prev" when at the beginning of t开发者_StackOverflow社区he list and next when at the end etc.

I guess this should have been obvious but it wasn't in the main documentation on how to use the icons. You just add the class ui-state-disabled to the element. So for example to do it through JavaScript you might do:

$('<selector>').addClass('ui-state-disabled');

You can set .ui-icon to not display, which should also hide the icons. You may or may not need the "!important" part.

.ui-icon { display: none !important; }

This is old but I ran into today so I figured I would clean it up. .addClass('ui-state-disabled') will apply the css to give it that disabled look. But if you have events bound to the icon it will still fire. You also have to make sure your js knows when its disabled. Maybe using if hasClass('ui-state-disabled'). But just adding the css class doesn't "disabled" the icon.

If you want to keep the diagonal "se" handle without the icon the best is :

.ui-icon { background-image:none     !important; }

You can add css opacity:0.7 on your element. I think this is useful not only for text but also for the icon or other element in your element.

I wrote a DEMO

The key component is:

.disable{
    opacity:0.7;
}

... and this DEMO with icon

you can't disable them because they are not 'html' elements so the best way is by using 'unbind()' method like: $('#icon-plus-sign').unbind('click');