deshabilitar el menú desplegable elegido por jquery

88

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!

javascript jquery jquery-chosen gedeonita
fuente

Respuestas:

151

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.

PSL
fuente
Parece que hay un error tipográfico liszt:updated, ¿no debería ser `list: updated?
lanoxx
1
lisztera correcto, pero ahora chosen:updatedes la forma correcta de hacerlo de todos modos.
Kaleb Anderson
Sugerencia: es posible que deba especificar la última versión del código en la primera en su respuesta, ya que muchos de los usuarios utilizarán la última versión. Usé liszt:updatedy no funcionó porque no funciona en nuevas versiones.
Lucky
.trigger("chosen:updated");También sirve para activar o desactivar, por ejemplo si lo vuelves a llamar en una función.
Arenas V.21 de
$ ('# opción foobar: no (: seleccionado)'). prop ('deshabilitado', verdadero) .trigger ("elegido: actualizado"); deshabilitará los otros elementos en el dropbox excepto el elemento seleccionado.
Asad Naeem
51

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 .

Orlando
fuente
7

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");
Pavan Katepalli
fuente
6 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

¡Esto funciona perfecto! @elegido v1.3.0

usuario2877913
fuente
1

Puedes probar esto:

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