how to prevent jquery (or jquery ui) from setting ui-state-disabled on a div?

Question

I'm using JQuery draggable and when I do

$(".a-div").draggable({disabled:true})

jquery is setting a ui-state-disabled to that div. ui-state-disabled is "implemented" in jquery ui css.

I still want jquery ui css. I would prefer not to change ui-state-disabled so I can use it somewhere else.

Is it possible to prevent jquery from setting ui-state-disabled?

Since disabled:true seems to be setting that css class, is there another way to make a draggable objet disabled ?

Answer 1

You can also simply override the css in your own, local css. That is, either inline or in a file that you import into your page, add the css rule:

.ui-state-disabled {
    background-image: none;
    opacity: 1;
}

Where, in this case, i've overridded the opacity value.

This can get u in trouble if you actually want to use this class elsewhere, in which case, programmatically adding/removing the class to/from selected elements (as suggested by Alphonso) is probably your best bet.

Answer 2

Those classes are defined in the jQueryUI core, if you really want to change it to something else you can either hack the code (not recommended for maintainability and functionality purposes) or do something ugly like this:

$('.ui-state-disabled').removeClass('ui-state-disabled').addClass('yourPreferredClassName');