отключить выпадающий список jQuery-chosen

у меня есть выбор div, который я использую выбранный плагин jquery для стиля и добавления функций (в частности, поиска). Див выглядит примерно так,

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

и я использую выбранный плагин, как это,

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

в то время как некоторые AJAX загружается, я хотел бы отключить весь <select> div. Может быть, с чем-то вроде этого,

 $('#foobar').disable()

или это

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

Я думаю, вы поняли идею.

любой идеи о том, как это сделать? Я пробовал несколько разных вещей, таких как использование идиом jquery для отключения вещей, отключение <select> который просто отключает базовый выбор, а не выбранный материал поверх него. Я даже прибегал к ручному добавлению другого div с высоким z-index просто Серый из коробки, но я думаю, что это, вероятно, будет некрасиво и глючно.

Спасибо за помощь!

6 71
javascript jquery jquery-chosen

6 ответов:

вы отключаете только ваш select, но выбранный рендерит его как divs, так и spans и т. д. Поэтому после отключения вашего выбора вам нужно обновить плагин, чтобы отключить виджет выбора. Вы можете попробовать этот способ:

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

Я нашел информацию здесь

Скрипка

после обновления виджета все, что он делает, это снимает привязку клика или других событий на плагине и изменяет его непрозрачность на 0.5. Как нет настоящего отключенном состоянии на див.

124

в последней версии выбранного,liszt:updated больше не работает. Вы должны использовать chosen:updated:

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

здесь JSFiddle.

40

PSL был правильным, но выбранный был обновлен с тех пор.

положите это после того, как вы сделаете отключение:

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

это работает прекрасно!!!! @выбранной В1.3.0

4
$("chosen_one").chosen({
  max_selected_options: -1
});
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();
});
0