Disable jquery dropdown

Question

I have a select div, which I use the selected jquery plugin to style and add features (primarily for searching). Div looks something like this:

<select data-placeholder="add a foobar" id="foobar" style="width: 350px;"> <option value=""></option> </select> 

And I use the selected plugin like this,

  $('#foobar').chosen(); 

While some AJAX are loading, I would like to disable the entire div <select> . Maybe something like this,

  $('#foobar').disable() 

or

  $('#foobar').prop('disabled', true) 

I think you get the point.

Any ideas on how to do this? I tried several different things, for example, using jquery idioms to disable things by disabling <select> , which simply disables the base selection and not the selected material on top of it. I even resorted to manually adding another div with a high z-index to just dullness in the field, but I think it will probably be ugly and buggy.

Thanks for the help!

Answer 1

You only disable your select , but chose it as divs and span, etc. Therefore, after disabling your selection, you need to update the plugin to disable the selection widget. You can try:

 $('#foobar').prop('disabled', true).trigger("liszt:updated"); //For non-older versions of chosen you would want to do: $('#foobar').prop('disabled', true).trigger("chosen:updated"); 

I found the information here

Fiddle

After updating the widget, all it does is turn off the click or other events in the plugin and change its opacity to 0.5. Since there is no real disabled state for the div.

Answer 2

In the latest version selected liszt:updated no longer works. You need to use chosen:updated :

 $(".chosen-select").attr('disabled', true).trigger("chosen:updated") 

Here's the JSFiddle .

Answer 3

PSL was right, but the chosen one has been updated since then.

Put this after disconnecting:

 $("#your-select").trigger("chosen:updated"); 

Answer 4

 $('#foobar').prop('disabled', true).trigger("chosen:updated"); 

It works Perfect !!!! @chosen v1.3.0

Answer 5

 $("chosen_one").chosen({ max_selected_options: -1 }); 

Answer 6

 $(document).ready(function () { $("#foobar").chosen().on('chosen:showing_dropdown',function() { $('.chosen-select').attr('disabled', true).trigger('chosen:updated'); $('.chosen-select').attr('disabled', false).trigger('chosen:updated'); $('.search-choice-close').hide(); }); $('.search-choice-close').hide(); });