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

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

Answer 2

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