отключить выпадающий список, выбранный jquery

88

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

 <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чтобы просто выделиться серым цветом, но я думаю, что это, вероятно, будет некрасиво и ошибочно.

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

javascript jquery jquery-chosen гидеонит
источник

Ответы:

151

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

$('#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. Поскольку для div нет реального отключенного состояния.

PSL
источник
Похоже, здесь есть опечатка liszt:updated, разве это не должно быть `list: updated?
lanoxx
1
lisztбыло правильно, но теперь chosen:updatedэто правильный способ сделать это в любом случае.
Калеб Андерсон
Предложение: вам может потребоваться сначала указать последнюю версию кода в своем ответе, поскольку многие пользователи будут использовать последнюю версию. Я использовал liszt:updatedи не работал, так как в новых версиях он не работает.
Lucky
.trigger("chosen:updated");Он также служит для активации или деактивации, например, если вы снова вызываете его в функции.
Arenas V.
$ ('# параметр foobar: not (: selected)'). prop ('disabled', true) .trigger ("selected: updated"); отключит другие элементы в раскрывающемся списке, кроме выбранного.
Асад Наим,
51

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

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

Вот JSFiddle .

Орландо
источник
7

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

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

$("#your-select").trigger("chosen:updated");
Паван Катепалли
источник
6 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

Это отлично работает !!!! @chosen v1.3.0

user2877913
источник
1

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

$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
Руви
источник
0 
$("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();
});
боатенг
источник