deshabilitar el menú desplegable elegido por jquery

Tengo un div seleccionado en el que estoy usando el complemento jquery elegido para diseñar y agregar funciones (especialmente, buscar). El div se parece a esto,

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

Y estoy usando el complemento elegido de esta manera,

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

Mientras se carga algo de AJAX, me gustaría deshabilitar todo el <select>div. Tal vez con algo como esto

 $('#foobar').disable()

o esto

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

Creo que entiendes la idea.

¿Alguna idea sobre cómo hacer esto? He intentado varias cosas diferentes, como usar los modismos de jquery para deshabilitar cosas, deshabilitar el <select>que simplemente deshabilita la selección subyacente, no las cosas elegidas encima. Incluso he recurrido a agregar manualmente otro div con un alto z-indexpara atenuar la caja, pero creo que es probable que esto sea feo y con errores.

¡Gracias por la ayuda!

Estás deshabilitando solo tu select, pero elegido lo renderiza como divs y spans, etc. Entonces, después de deshabilitar tu selección, debes actualizar el complemento para que el widget de selección también esté deshabilitado. Puedes probar de esta manera:

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

Encontré la información aquí

Violín

Una vez que actualiza el widget, todo lo que hace es desvincular el clic u otros eventos en el complemento y cambiar su opacidad a 0.5. Como no hay un estado de discapacidad real para un div.

En la última versión de elegido, liszt:updatedya no funciona. Necesitas usar chosen:updated:

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

Aquí hay un JSFiddle .

PSL era correcto, pero el elegido se ha actualizado desde entonces.

Pon esto después de hacer la desactivación:

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

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

¡Esto funciona perfecto! @elegido v1.3.0

Puedes probar esto:

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