Bootstrap Multiselect plugin et désactivation/activation des cases à cocher sur l'événement de changement de
Je suis en utilisant Bootstrap Multiselect pour afficher une liste des années où le nombre maximal d'années peut-être 4. C'est à dire. si 4 ans ont été sélectionnées, désactivez toutes les autres années ; si une année a été désactivée pour faire le décompte de 3, de permettre à tous les ans à nouveau.
(Le dernier commit sur ce plugin du projet était d'ajouter une activer/désactiver la fonction, mais je ne pense pas que c'est pour l'individu de sélectionner des éléments - https://github.com/davidstutz/bootstrap-multiselect/issues/171)
Mon code HTML:
<select id="slYears" class="multiselect" multiple="multiple">
<option value="1" disabled="disabled">2009</option>
<option value="2" selected="selected">2010</option>
<option value="3" selected="selected">2011</option>
<option value="4" selected="selected">2012</option>
<option value="5" selected="selected">2013</option>
</select>
Mon JavaScript (première tentative):
$('#slYears').change(function () {
var arr = $(this).val().toString().split(',');
if (arr.length >= 4) {
$('#slYears option').each(function () {
if (!$(this).is(':selected')) {
$(this).prop('disabled', true);
}
});
}
else {
$('#slYears option').each(function () {
$(this).prop('disabled', false);
});
}
});
Puis j'ai essayé d'utiliser certains de plugin méthodes et des exemples. J'ai essayé d'utiliser le 'tout sélectionner' exemple pour permettre à tous, j'ai essayé d'utiliser le 'onchange' événement, mais aucune ne fonctionne.
Voici le jsfiddle: http://jsfiddle.net/389Af/1/ (remarque, j'ai collé le plugin JS avant au-dessus de la JS)
OriginalL'auteur user982119 | 2013-10-20
Vous devez vous connecter pour publier un commentaire.
OK je suis venu avec une solution. J'ai ajouté une démo à l'actuel maître de la branche du plugin. Voir ici: http://davidstutz.github.io/bootstrap-multiselect/#further-examples. Le code se présente comme suit. Dans ce code, l'
select
a l'IDexample37
:Quelques explications:
selectedOptions
est un tableau de la actuellement sélectionné les options. Si 4 ou plus d'options est sélectionnée, toutes les autres cases à cocher sont désactivées (les options à l'intérieur de l'invisible sélectionnez ne sont pas désactivés). Si moins de 4 options sont sélectionnées, toutes les cases à cocher sont activées à nouveau.OriginalL'auteur David Stutz
David réponse m'a beaucoup aidé. Merci pour cela.
J'ai changé le code pour être plus générique et applicable pour toute multiselect.
Il exige que l'sélectionnez l'élément de données de la valeur "max" est réglé.
<select ... data-max="5"/>
Il serait agréable d'avoir quelque chose comme un "max-permis" de faire partie de la spécification du composant.. 😉
OriginalL'auteur Aubrey