désactiver le menu déroulant choisi par jquery

J'ai un div de sélection que j'utilise le plugin jquery choisi pour styliser et ajouter des fonctionnalités (plus particulièrement, la recherche). Le div ressemble à quelque chose comme ça,

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

Et j'utilise le plugin choisi comme celui-ci,

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

Pendant le chargement de certains AJAX, j'aimerais désactiver le <select>div entier . Peut-être avec quelque chose comme ça,

 $('#foobar').disable()

ou ca

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

Je pense que vous avez l'idée.

auriez vous des idées pour faire ça? J'ai essayé un certain nombre de choses différentes, comme utiliser des idiomes jquery pour désactiver des choses, désactiver le <select>qui désactive simplement 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 un haut z-indexpour simplement griser la boîte, mais je pense que c'est probablement moche et bogué.

Merci pour l'aide!

Vous désactivez juste votre select, mais choisi le rend en tant que div, et s'étend, etc. Donc, après avoir désactivé votre sélection, vous devez mettre à jour le plugin pour désactiver le widget de sélection. 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é les informations ici

Violon

Une fois que vous mettez à jour le widget, il ne fait que dissocier le clic ou d'autres événements sur le plugin et changer son opacité à 0,5. Comme il n'y a pas de véritable état désactivé pour un div.

Dans la dernière version de choisi, liszt:updatedne fonctionne plus. Vous devez utiliser chosen:updated:

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

Voici un JSFiddle .

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

Mettez ceci après avoir désactivé:

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

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

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

Vous pouvez essayer ceci:

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