wyłącz menu rozwijane wybrane przez jQuery

88

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!

javascript jquery jquery-chosen gideonite
źródło

Odpowiedzi:

151

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.

PSL
źródło
Wygląda na to, że jest tam literówka liszt:updated, czy nie powinno to być list: zaktualizowane?
lanoxx
1
lisztbyło poprawne, ale teraz i tak chosen:updatedjest właściwy sposób, aby to zrobić.
Kaleb Anderson
Sugestia: może być konieczne określenie w odpowiedzi na początku najnowszej wersji kodu, ponieważ wielu użytkowników będzie korzystać z najnowszej wersji. Używałem liszt:updatedi nie działałem, ponieważ nie działa w nowych wersjach.
Lucky
.trigger("chosen:updated");Służy również do włączania lub wyłączania, na przykład w przypadku ponownego wywołania w funkcji.
Arenas V.
$ ('# foobar opcja: not (: selected)'). prop ('disabled', true) .trigger ("selected: updated"); wyłączy inne elementy w skrzynce z wyjątkiem wybranego elementu.
Asad Naeem
51

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

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

Oto JSFiddle .

Orlando
źródło
7

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

Umieść to po wyłączeniu:

$("#your-select").trigger("chosen:updated");
Pavan Katepalli
źródło
6 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

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

user2877913
źródło
1

Możesz spróbować tego:

$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
ruvi
źródło
0 
$("chosen_one").chosen({
  max_selected_options: -1
});
Andrew Nodermann
źródło
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();
});
boateng
źródło