web-dev-qa-db-fra.com

Select2 désactiver/activer une option spécifique

J'ai la liste qui est de type select2.

<select id="list" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="Types">
<option value="None">None</option>
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
</select>

Je veux désactiver l'option qui a value = 1 Donc j'ai fait comme ça 

$("#list>optgroup>option[value='1']").prop('disabled',true);
   Result:// <option value="1" disabled>One</option>

Cela fonctionne bien, mais si je veux réactiver l'option désactivée, j'ai essayé ci-dessous les codes mais l'option Select2 est toujours désactivée.

$("#list>optgroup>option[value='1']").prop('disabled',false);
$("#list>optgroup>option[value='1']").removeProp('disabled');
  Result://   <option value="1">One</option>

mais étrange est désactivé, la propriété de l'option est supprimée. mais l'option Sélectionner2 reste désactivée.

Ne pas savoir comment résoudre ce problème. Besoin d'aide pour.

Mise à jour: Si je vérifie le DOM de select2, cette propriété est désactivée même après la suppression.

<li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li>

si je fais aria-disabled = "false" cela va permettre. pas en mesure d'obtenir quelle est la cause.

jqueryselectjquery-select2
15
Madhukar Hebbar

Le moyen le plus simple d'y parvenir serait probablement d'appeler .select2(…) sur l'élément après avoir modifié l'attribut disabled.

http://jsfiddle.net/xoxd2u15/

Étant donné que select2 remplace le champ de sélection d'origine par des éléments HTML personnalisés (et masque l'original), et ne semble pas "surveiller" les options de cet élément de sélection d'origine pour les modifications de son état désactivé en permanence après l'invocation, vous devez appeler une fois de plus après le changement d'état, il lit les valeurs d'attribut actuelles à partir des options de l'élément d'origine. 

22
CBroe

Pour désactiver, essayez ceci:

$("#list>optgroup>option[value='1']").attr('disabled','disabled');

Pour supprimer Désactiver Essayez ceci:

$("#list>optgroup>option[value='1']").removeAttr('disabled');
2
answer99

Il existe des cas étranges dans lesquels vous devez supprimer à la fois les propriétés prop (noeud) et attr (attribut HTML du document). En fait, ils ne sont pas identiques, mais jQuery a tendance à les traiter de cette façon.

Donc vous auriez besoin de faire

$("#list>optgroup>option[value='1']").removeAttr('disabled').removeProp('disabled');

De cette façon, il supprime à la fois la propriété du noeud et l'attribut dom.

Cela dit, vous devrez probablement mettre à jour l’instance select2 pour laquelle personne n’a mentionné la bonne solution.

$('#list').trigger('change.select2');

.trigger ('change') fonctionnerait aussi, mais aurait des effets secondaires si d'autres fonctionnalités étaient liées à l'événement change. De plus, vous ne pouvez pas l’utiliser dans une fonction déjà «accrochée» («changer»).

0
Daniel Iser