javascript - disable jquery-chosen dropdown - Stack Overflow

admin管理员组

文章数量:1134241

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!

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!

• javascript
• jquery
• jquery-chosen

Share Improve this question Follow edited Jun 18, 2013 at 1:15 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Jun 17, 2013 at 17:33 gideonitegideonite 1,22111 gold badge88 silver badges1414 bronze badges 0

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 167

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.

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.

PSL was correct, but chosen has been updated since.

Put this after you do the disabling:

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

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

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

You can try this:

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

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

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

本文标签： javascriptdisable jquerychosen dropdownStack Overflow