disabilita il menu a discesa scelto da jquery

Ho un div selezionato che sto utilizzando il plug-in jquery scelto per definire e aggiungere funzionalità (in particolare, ricerca). Il div ha un aspetto simile a questo,

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

E sto usando il plugin scelto in questo modo,

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

Mentre alcuni AJAX vengono caricati, vorrei disabilitare l'intero <select>div. Forse con qualcosa del genere

 $('#foobar').disable()

o questo

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

Penso che tu abbia avuto l'idea.

Qualche idea su come fare questo? Ho provato una serie di cose diverse, come usare gli idiomi jquery per disabilitare le cose, disabilitare il <select>che disabilita solo la selezione sottostante, non le cose scelte sopra di essa. Ho persino fatto ricorso ad aggiungere manualmente un altro div con un alto z-indexper rendere grigio solo fuori dalla scatola, ma penso che questo sia probabilmente brutto e pieno di bug.

Grazie per l'aiuto!

Stai disabilitando solo il tuo select, ma scelto lo rende come divs, spans, ecc. Quindi, dopo aver disabilitato la tua selezione, devi aggiornare il plugin per rendere disabilitato anche il widget di selezione. Puoi provare in questo modo:

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

Ho trovato le informazioni qui

Violino

Una volta aggiornato il widget, tutto ciò che fa è svincolare il clic o altri eventi sul plug-in e cambia la sua opacità a 0,5. Poiché non esiste uno stato di disabilitazione reale per un div.

Nell'ultima versione di scelto, liszt:updatednon funziona più. Devi usare chosen:updated:

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

Ecco un JSFiddle .

PSL era corretto, ma da allora la scelta è stata aggiornata.

Mettilo dopo aver disabilitato:

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

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

Funziona perfettamente !!!! @chosen v1.3.0

Puoi provare questo:

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