Отключить выпадающий список jquery

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

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

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

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

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

 $('#foobar').disable()

или

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

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

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

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

Ответы

Ответ 1

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

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

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

Fiddle

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

Ответ 2

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

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

Здесь JSFiddle.

Ответ 3

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

Поместите это после отключения:

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

Ответ 4

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

Это работает Perfect!!!! @chosen v1.3.0

Ответ 5

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

Ответ 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();
});

Ответ 7

Вы можете попробовать это:

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