désactiver le menu déroulant choisi par jquery

88

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!

javascript jquery jquery-chosen gédéonite
la source

Réponses:

151

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.

PSL
la source
On dirait qu'il y a une faute de frappe liszt:updated, ne devrait-il pas être `list: updated?
lanoxx
1
lisztétait correct, mais c'est maintenant chosen:updatedla bonne façon de le faire de toute façon.
Kaleb Anderson
Suggestion: vous devrez peut-être spécifier la dernière version du code en premier dans votre réponse, car de nombreux utilisateurs utiliseront la dernière version. J'ai utilisé liszt:updatedet je n'ai pas fonctionné car cela ne fonctionne pas dans les nouvelles versions.
Chanceux
.trigger("chosen:updated");Il sert également à l'activer ou à le désactiver, par exemple si vous le rappelez dans une fonction.
Arenas V.
$ ('# option foobar: non (: sélectionné)'). prop ('désactivé', vrai) .trigger ("choisi: mis à jour"); désactivera les autres éléments de la boîte de dépôt, à l'exception de l'élément sélectionné.
Asad Naeem
51

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 .

Orlando
la source
7

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

Mettez ceci après avoir désactivé:

$("#your-select").trigger("chosen:updated");
Pavan Katepalli
la source
6 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

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

user2877913
la source
1

Vous pouvez essayer ceci:

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