désactiver la liste déroulante choisie par jquery

Question

J'ai un div de sélection que j'utilise la fonction plugin jquery choisi pour le styliser et y ajouter des fonctionnalités (notamment la recherche). Le div ressemble à quelque chose comme ceci,

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

Et j'utilise le plugin choisi comme ceci,

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

Pendant qu'AJAX est en train de charger, j'aimerais désactiver l'ensemble de l'interface. <select> div. Peut-être avec quelque chose comme ça,

 $('#foobar').disable()

ou ceci

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

Je pense que vous avez compris l'idée.

Avez-vous des idées sur la manière de procéder ? J'ai essayé un certain nombre de choses différentes, comme l'utilisation d'idiomes jquery pour désactiver des choses, la désactivation de l'élément <select> qui ne fait que désactiver la sélection sous-jacente, pas les éléments choisis par-dessus. J'ai même eu recours à l'ajout manuel d'un autre div avec une valeur élevée de z-index pour simplement sortir de la boîte grise, mais je pense que cela risque d'être laid et bogué.

Merci pour votre aide !

Answer 1

Vous ne désactivez que votre select mais il est choisi de le rendre sous forme de divs, de spans, etc. Donc après avoir désactivé votre select, vous devez mettre à jour le plugin pour que le widget select soit également désactivé. Vous pouvez essayer de cette façon :

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

J'ai trouvé l'information aquí

Violon

Une fois que vous mettez à jour le widget, tout ce qu'il fait est de délier les événements de clic ou autres sur le plugin et de changer son opacité à 0,5. Comme il n'existe pas de véritable état désactivé pour un div.

Answer 2

Dans la dernière version du logiciel choisi, liszt:updated ne fonctionne plus. Vous devez utiliser chosen:updated :

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

Voici un JSFiddle .

Answer 3

PSL était correct, mais le choix a été mis à jour depuis.

Mettez ça après avoir fait la désactivation :

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

Answer 4

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

Cela fonctionne parfaitement !!!! @chosen v1.3.0

Answer 5

Vous pouvez essayer ceci :

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