Crear casillas de verificación mutuamente excluyentes (C#)

por Christian Wenz

Descargar PDF

Cuando de un conjunto de opciones solo se puede seleccionar una, normalmente se usan botones de radio. Sin embargo, hay un inconveniente: una vez seleccionado un botón de radio en un grupo, no es posible desactivarlos todos. Las casillas se pueden desactivar en cualquier momento, pero no se excluyen mutuamente. Este tutorial proporciona lo mejor de ambos enfoques: casillas que son mutuamente excluyentes.

Información general

Cuando de un conjunto de opciones solo se puede seleccionar una, normalmente se usan botones de radio. Sin embargo, hay un inconveniente: una vez seleccionado un botón de radio en un grupo, no es posible desactivarlos todos. Las casillas se pueden desactivar en cualquier momento, pero no se excluyen mutuamente. Este tutorial proporciona lo mejor de ambos enfoques: casillas que son mutuamente excluyentes.

Pasos

El AJAX Control Toolkit de ASP.NET contiene el control extensor MutuallyExclusiveCheckBox. Esto permite a los programadores asignar cualquier casilla a un nombre de grupo (atributo Key). En todas las casillas del mismo grupo, solo se puede seleccionar una al mismo tiempo.

Comencemos colocando dos casillas en una nueva página ASP.NET. Puede haber más, pero bastan dos de ellas para demostrar el principio:

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

Para ambas casillas, se debe colocar un control MutuallyExclusiveCheckBoxExtender en la página. Ambos atributos clave deben tener el mismo valor, al igual que los atributos de valor de los elementos de botón de radio HTML deben ser idénticos para indicar el grupo al que pertenecen. La propiedad TargetControlID del extensor apunta al id. de la casilla.

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

Por último, incluya el ASP.NET AJAX ScriptManager que requiere todos los elementos de ASP.NET AJAX Control Toolkit:

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

Guardar y ejecutar la página: puede activar y desactivar ambas casillas, pero en ningún momento se pueden activar ambas casillas.

Solo se puede activar una casilla a la vez (Haga clic para ver la imagen a tamaño completo)

Siguiente