javascript - example - deshabilitar el menú desplegable elegido por jquery

jquery chosen select option

Question

Tengo un div seleccionado que estoy usando el plugin jquery elegido para darle estilo y agregarle características (más notablemente, búsqueda). 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 plugin elegido así,

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

Mientras se carga algo de AJAX, me gustaría desactivar 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 una serie de cosas diferentes, como usar expresiones idiomáticas de jquery para deshabilitar cosas, deshabilitar la <select> que simplemente deshabilita la selección subyacente, no las cosas elegidas en la parte superior. Incluso he recurrido a agregar manualmente otro div con un alto z-index para que salga gris del cuadro, pero creo que es probable que sea feo y problemático.

¡Gracias por la ayuda!

Answer 1

En la última versión de elegida, liszt:updated ya no funciona. Debe usar chosen:updated :

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

Aquí hay un JSFiddle .

Answer 2

Estás deshabilitando solo tu select , pero elegida la representa como divs, y expande, etc. Por lo tanto, después de deshabilitar tu selección, debes actualizar el complemento para inhabilitar también el widget de selección. Puedes intentarlo 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 here

Fiddle

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

Answer 3

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

Pon esto después de que hagas la inhabilitación:

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

Answer 4

$("chosen_one").chosen({
  max_selected_options: -1
});

Answer 5

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

Esto funciona perfecto !!!! @chosen v1.3.0

Answer 6

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