Skip navigation

Category Archives: javascript

I’ve been using the rather excellent jQuery Chosen plugin for a project. However, I came to a hurdle dealing with disabled options.

The plugin works by taking a given select element, hiding it, and building a new and improved select box with the given data. By default, however, it does not include disabled elements. Once I got to grips with how the plugin works, however, it was a relatively simple fix.

1) The method that adds the select options to the new select object defaults to returning an empty string if the option is disabled.

You can change this to return some custom CSS/HTML for disabled elements. The code is in Chosen.prototype.result_add_option.

2) You need to disable the standard routine for clicked items.

After the variable item is assigned in Chosen.prototype.result_select we can check whether item.disabled is true. If so, return false to abort item selection.

3) The disabled items are always in the search results!

This can be fixed by changing

if(!option.disabled && !option.empty)

in Chosen.prototype.winnow_results to

if(!option.empty)

I haven’t included any proper code snippets since this was a quick hack, but I will consider contributing something to the project on GitHub if I have time. I hope this can be useful to someone anyway.