Créer des cases à cocher mutuellement exclusives

| Christian Wenz | Philippe Vialatte (Traduction) |

Quand une seule option d'une série doit être sélectionnée, les boutons radio sont généralement utilisés. Il y a un inconvénient, cependant : une fois qu'un bouton radio d'un groupe est sélectionné, il n'est pas possible de désélectionner tous les boutons radio. Les cases à cocher peuvent être désactivées à tout moment, mais ne sont pas mutuellement exclusives. Ce tutoriel présente la meilleure des deux approches: des cases à cocher qui sont mutuellement exclusives.
Voir une démo
Téléchargez le code de ce tutoriel

- Titre : Créer des cases à cocher mutuellement exclusives

- Auteurs : Christian Wenz, Philippe Vialatte (Traduction)

- Parution : 3 mai 2009

- Mise à jour : 3 mai 2009

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Étapes

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Creating Mutually Exclusive Checkboxes

Étapes

L'ASP.NET AJAX Control Toolkit contient l'extension MutuallyExclusiveCheckBox. Cela permet aux programmeurs d'assigner à une case à cocher un nom de groupe (attribut Key). De toutes les cases à cocher d'un même groupe, une seule peut être sélectionnée à la fois.

Commençons par mettre deux cases à cocher sur une nouvelle page ASP.NET. Il pourrait y'en avoir plus, mais deux d'entre elles suffisent à démontrer le principe :

<asp:CheckBox ID="cbYes" runat="server" />Yes
<asp:CheckBox ID="cbNo" runat="server" />No

Pour les deux cases à cocher, un contrôle MutuallyExclusiveCheckBoxExtender doit être mis sur la page. Les deux attributs Key doivent avoir la même valeur, de la même façon que les attributs name d'un ensemble de boutons radio doivent être identiques pour désigner le groupe auquel ils appartiennent. La propriété TargetControlID de l'extension doit pointer vers l'ID de la case à cocher.

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe1" runat="server"
TargetControlID="cbYes" Key="YesNo" />
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="mecbe2" runat="server"
TargetControlID="cbNo" Key="YesNo" />

Enfin, il faut inclure le ScriptManager d'ASP.NET AJAX, qui est requis par tous les éléments de l'ASP.NET AJAX Control Toolkit :

<asp:ScriptManager ID="asm" runat="server" />

Enregistrez et exécutez la page. Vous pouvez cocher et décocher les deux cases à cocher, mais à aucun moment les deux cases à cocher ne peuvent être cochées.

Une seule case peut être cochée à la fois