Habilitar y deshabilitar la casilla de verificación en HTML

1. Casilla de verificación en HTML
2. Use el atributo marcado para habilitar una casilla de verificación de forma predeterminada en HTML
3. Use el atributo deshabilitado para deshabilitar una casilla de verificación de forma predeterminada en HTML

Este artículo explora formas de habilitar y deshabilitar la casilla de verificación en HTML.

Casilla de verificación en HTML

Una casilla de verificación es un cuadro interactivo que se puede alternar para indicar afirmación o negación. Es muy utilizado en formularios y cuadros de diálogo.

Las casillas de verificación se utilizan cuando hay algunas opciones, y el usuario es libre de elegir cualquier cantidad de opciones, incluida cero. Eso significa que marcar una no desmarca automáticamente las otras opciones.

Una casilla de verificación se usa principalmente cuando hay opciones que no son mutuamente excluyentes. Aparece un pequeño cuadro al costado de cada opción que se puede alternar.

Por defecto, el cuadro está vacío. Un cuadro vacío denota negación, o el usuario no eligió la opción.

Al hacer clic, aparece una marca de verificación dentro del cuadro. La marca de verificación indica una afirmación.

Cuando se vuelve a hacer clic, la marca de verificación desaparece.

Puede crear una casilla de verificación en HTML utilizando la etiqueta <input> y configurando su atributo tipo en casilla de verificación. Puede escribir el nombre del elemento después de la etiqueta <input>.

Por ejemplo, cree una lista desordenada usando la etiqueta ul y establezca estilo en estilo de lista: ninguno; para que no aparezcan viñetas con los elementos de la lista. Cree cuatro elementos de la lista y utilice <input type="checkbox"> para crear una casilla de verificación para cada elemento de la lista.

Ejemplo de código:

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

Cada elemento de la lista tendrá por defecto la función de alternar en su respectiva casilla de verificación.

Use el atributo marcado para habilitar una casilla de verificación de forma predeterminada en HTML

Si necesita una casilla de verificación donde una opción siempre esté marcada de forma predeterminada, puede implementar un atributo a la etiqueta <input>. El atributo a utilizar es el atributo marcado.

Solo necesita establecer el valor del atributo en marcado para convertirlo en marcado de forma predeterminada.

Por ejemplo, para las opciones Beber y Repetir, agregue el atributo marcado y establezca su valor en "marcado". Esto asegura que la casilla de verificación de estos dos valores esté marcada de forma predeterminada.

Código de ejemplo:

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

Las opciones marcadas se pueden desactivar en cualquier momento con un clic.

También podemos usar el marcado solo para obtener el mismo resultado.

Código de ejemplo:

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

Use el atributo deshabilitado para deshabilitar una casilla de verificación de forma predeterminada en HTML

Para deshabilitar una casilla de verificación de forma predeterminada en HTML, puede usar un atributo llamado deshabilitado. Especificar el valor del atributo deshabilitado en deshabilitado evitará que el usuario marque la casilla de verificación.

Considere el siguiente ejemplo.

Código de ejemplo:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

De la salida, está claro que solo dos de las cuatro opciones tienen una función de alternancia. “Comer” y “Código” se pueden alternar para mostrar una marca de verificación, pero “Beber” y “Repetir” no.

Las opciones Beber y Repetir están deshabilitadas por defecto. Cuando hacemos clic en la casilla de verificación junto a las opciones Beber y Repetir, la casilla de verificación no responde a nuestro clic.

Eso hace que solo dos de las cuatro opciones sean verificables.

Se puede obtener el mismo resultado utilizando solo deshabilitado.

Código de ejemplo:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

Por lo tanto, estas son las formas de habilitar o deshabilitar las casillas de verificación en HTML.