web-dev-qa-db-fra.com

désactiver le menu déroulant choisi par jquery

J'ai un div sélectionné que j'utilise le plugin jquery choisi pour styler et ajouter des fonctionnalités (notamment la recherche). La div a 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 ça,

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

Pendant que certains AJAX sont en cours de chargement, je voudrais désactiver l'intégralité de la div <select>. Peut-être avec quelque chose comme ceci,

 $('#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 les idiomes de 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'une autre div avec un z-index Élevé pour griser la case, mais je pense que cela risque d'être laid et buggy.

Merci pour l'aide!

javascriptjqueryjquery-chosen
80
gideonite

Vous ne désactivez que votre select, mais vous le rendez en div, en étendue, etc. Ainsi, après avoir désactivé votre sélection, vous devez mettre à jour le plug-in pour que le widget de sélection 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 ici

violon

Une fois le widget mis à jour, il ne fait que dissocier le clic ou les autres événements du plug-in et modifie son opacité en 0.5. Comme il n'y a pas de véritable état désactivé pour une div.

135
PSL

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

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

Voici un JSFiddle .

44
Orlando

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

Mettez ceci après avoir fait la désactivation:

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

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

4
user2877913
$(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();
});
0
boateng
$("chosen_one").chosen({
  max_selected_options: -1
});
0
Andrew Nodermann