disable jquery-chosen dropdown

Question

I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,

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

And I'm using the chosen plugin like this,

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

While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,

 $('#foobar').disable()

or this

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

I think you get the idea.

Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.

Thanks for the help!

score 166 · Accepted Answer · edited Jun 20 '20 at 09:12

166

You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:

$('#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

Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 17 '13 at 17:59

PSL

123,204
21
253
243

Looks like there is a typo in `liszt:updated`, shouldn't it be `list:updated? – lanoxx Nov 12 '15 at 16:01
2

`liszt` was correct, but now `chosen:updated` is the proper way to do it anyway. – Kaleb Anderson Feb 22 '16 at 16:43
Suggestion : You may need to specify the latest version of the code at first one in your answer since many of the users will be using the latest version. I used `liszt:updated` and didn't work since it isn't working in new versions. – Lucky Mar 14 '16 at 06:13
`.trigger("chosen:updated");` It also serves to activate or deactivate, for example if you call it again in a function. – Arenas V. Dec 21 '19 at 22:23
$('#foobar option:not(:selected)').prop('disabled', true).trigger("chosen:updated"); will disable the other items in the dropbox except the selected item. – Asad Naeem Mar 09 '20 at 10:04

Orlando · Answer 2 · 2019-01-04T20:35:16.310

55

In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:

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

Here's a JSFiddle.

edited Jan 04 '19 at 20:35

answered Aug 22 '13 at 19:06

Orlando

9,374
3
56
53

score 8 · Answer 3 · answered Nov 01 '13 at 18:52

8

PSL was correct, but chosen has been updated since.

Put this after you do the disabling:

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

answered Nov 01 '13 at 18:52

Pavan Katepalli

2,372
4
29
52

score 8 · Answer 4 · edited May 25 '15 at 08:19

8

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

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

edited May 25 '15 at 08:19

Rohan Kumar

40,431
11
76
106

answered Feb 06 '15 at 05:47

user2877913

101
1
3

score 1 · Answer 5 · edited Oct 11 '19 at 06:31

1

You can try this:

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

edited Oct 11 '19 at 06:31

Dino

7,779
12
46
85

answered Oct 11 '19 at 05:30

ruvi

701
7
9

score 0 · Answer 6 · answered Jul 25 '16 at 17:29

0

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

answered Jul 25 '16 at 17:29

Andrew Nodermann

610
8
13

boateng · Answer 7 · 2017-06-09T19:43:48.617

0

$(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();
});

edited Jun 09 '17 at 19:43

answered Jun 09 '17 at 19:37

boateng

910
11
21

disable jquery-chosen dropdown

7 Answers7

Fiddle

Linked