wyłącz menu rozwijane wybrane przez jQuery

Mam wybrany element div, do którego używam wybranej wtyczki jquery do stylizacji i dodawania funkcji (przede wszystkim do wyszukiwania). Div wygląda mniej więcej tak,

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

I używam wybranej wtyczki w ten sposób,

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

Podczas ładowania AJAX chciałbym wyłączyć cały <select>div. Może z czymś takim,

 $('#foobar').disable()

albo to

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

Myślę, że masz pomysł.

Jakieś pomysły, jak to zrobić? Próbowałem wielu różnych rzeczy, takich jak używanie idiomów jquery do wyłączania rzeczy, wyłączanie tego, <select>co po prostu wyłącza podstawowy wybór, a nie wybrane rzeczy na wierzchu. Uciekłem się nawet do ręcznego dodania kolejnego div z wysokim, z-indexaby po prostu wyszarzać pudełko, ale myślę, że jest to prawdopodobnie brzydkie i błędne.

Dzięki za pomoc!

Wyłączasz tylko swój select, ale wybrany, renderuje go jako elementy div, spans itp. Więc po wyłączeniu zaznaczenia musisz zaktualizować wtyczkę, aby wyłączyć również widget wyboru. Możesz spróbować w ten sposób:

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

Znalazłem informacje tutaj

Skrzypce

Po zaktualizowaniu widgetu wszystko, co robi, to usuwa powiązanie kliknięcia lub innych zdarzeń we wtyczce i zmienia jego krycie na 0,5. Ponieważ nie ma rzeczywistego stanu wyłączenia dla elementu div.

W ostatniej wybranej wersji liszt:updatedjuż nie działa. Musisz użyć chosen:updated:

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

Oto JSFiddle .

PSL był poprawny, ale wybrany został zaktualizowany od tego czasu.

Umieść to po wyłączeniu:

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

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

To działa doskonale !!!! @chosen v1.3.0

Możesz spróbować tego:

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