How to disable jquery ui icons

Question

Is there a way to disable icons in jquery? For example, I use 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 the list and then when the end and t .d.

Answer 1

I suppose this should have been obvious, but not in the main documentation on how to use the icons. You simply add the ui-state-disabled class to the element. For example, to do this through javascript, you can do:

$ ('') addClass. ('UH-state-disabled');

Answer 2

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

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

Answer 3

This is old, but I came across today, so I decided that I could clear it .. addClass ('ui-state-disabled') will apply css to give this disabled look. But if you have events associated with the icon, it will still burn. You should also make sure your js knows when it was disabled. Maybe use if hasClass ('ui-state-disabled'). But just adding a css class does not disable the icon.

Answer 4

If you want to keep the diagonal descriptor "se" without an icon, best of all:

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

Answer 5

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

I wrote DEMO

Key component:

 .disable{ opacity:0.7; } 

... and DEMO with a badge

Answer 6

you cannot disable them because they are not "html" elements, so the best way is to use the "unbind ()" method, for example: $ ('# icon-plus-sign'). unbind ('click');