I'm using http://code.google.com/p/dropdown-check-list/ And when dynamically disabling it (in some scenario), want it to be gray.. tried to use .addClass but didn't work.. Thanks!
Add a comment
|
3 Answers
The DDCL plugin has built-in support for disabling/enabling the widget. Simply call the dropdownchecklist method on your original select element with the 'disable' parameter:
$('#myselect').dropdownchecklist('disable');
// to enable:
$('#myselect').dropdownchecklist('enable');
When disabled, clicking the widget will not cause the dropdown to open, and the class ui-state-disabled is applied to the widget control element. With the default ThemeRoller CSS files, the control will have an opacity so that it appears dimmed. You could customize this appearance in your own CSS with .ui-dropdownchecklist-selector.ui-state-disabled { ... }.
Comments
It works ok form, so I suppose there's something you're doing wrong.
I imagine you have .gray{ color: #ccc;} in your CSS. Then, when you initialize Dropdown CheckList plugin, you'll have a call more or less like this:
$("#mydropdown").dropdownchecklist();
If you try $("#mydropdown").dropdownchecklist().addClass("gray"), you're adding the class to the original dropdown.
The new dropdown control defaults with the id prefix ddcl-XXX (D rop d own C heck L ist), being XXX the idof the real dropdown. Knowing this, try the following:
$("#mydropdown").dropdownchecklist();
$("#ddcl-mydropdown").addClass("gray");
Comments
Having not seen the code I'd suggest using $('example').attr('class', 'class_you_are_adding'); Sometimes .addclass doesn't work like you would expect. Being more explicit solves the problem.
5 Comments
josh3736
What do you mean
addClass doesn't always work like you might expect? It always adds the specified class(es) to the element. Using attr('class', ...) would have side effects because it overwrites what is already there.
JimP
@josh373 I'm just saying that there have been instances before when .addclass did not work like I expected. Depending on what you are doing and how you are doing it attr('class', ...) can be an effective solution. I'm not saying there aren't other ways of doing this, I'm just offering a possible solution. I thought that's what this site was here for.
josh3736
This is not an effective solution because there is a significant difference between
addClass(...) and attr('class', ...), which you completely gloss over: adding classes vs setting classes. The latter is a destructive operation (which is why we have addClass in the first place). In this case, using attr would overwrite the classes the plugin adds to the widget element -- ui-dropdownchecklist ui-dropdownchecklist-selector-wrapper ui-widget -- which would break the widget's styling. For proper ThemeRoller compatibility, the class ui-state-disabled needs to be added.josh3736
Also, regarding your experience
addClass: There's absolutely nothing that should be 'unexpected'. Given a space-delimited list of CSS classes, addClass will merge those classes into the classes already set on each of the matched elements. (In other words, if an element already has a class that you're trying to add, the class will not be duplicated.) Take a look at the actual function -- there's no surprises.josh3736
...that said, if you want to clear an element's CSS classes and set new ones, you're right,
attr('class', ...) is the correct approach. However, that's not what we want to do in this case, and you should be more explicit about the difference in your approach when suggesting it.