Skip navigation

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


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.


  1. hello… i want to achieve exactly this functionality. 1 and 2 are working as expected but for (3) this change isn’t working. Disabled options are still not removed when searching. Maybe sth changed in a newer version of chosen? I use version 0.9.8

    thanks in advance

    • Hi Nick,

      I’m also using 0.9.8, so it must be something else. For reference, I’ve included my entire winnow_results method, and my entire modified copy of the script. I mainly got it to work by hacking away at it, rather than actually knowing what I was doing, but if these don’t help, let me know and I’ll see if I can figure out what was going through my head at the time.

      Just winnow_results:

      Edit: pasted from the wrong file.

        • nick
        • Posted November 12, 2012 at 10:46 pm
        • Permalink

        thank you very much for your help! your script works as described. I compared it with min and found out the the problem is in 1st edit (result_add_option). What i did was inside the same block just added…. if (option.disabled) classes.push(“result-disabled”); ……….

        it seems that this makes the options to always be visible…. your approach … with inline style works!

        thans šŸ˜‰

      • Glad I could help. šŸ™‚

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: