Manipular Atributos Booleanos en JavaScript

Los atributos booleanos en HTML son un caso especial. Su presencia en el elemento activa una funcionalidad, y su ausencia la desactiva. A diferencia de otros atributos que aceptan valores explícitos (como value, class, href), estos funcionan con solo estar presentes, sin importar el valor que contengan.

Atributos como checked, disabled, readonly, required, entre otros, son comunes en formularios y controles interactivos. Sin embargo, manipularlos desde JavaScript requiere entender cuándo usar setAttribute() y cuándo trabajar con propiedades del DOM.

Qué son los atributos booleanos en HTML

Un atributo booleano es aquel que no necesita valor explícito para tener efecto. El simple hecho de estar presente en la etiqueta ya lo activa. Por ejemplo:

<input type="checkbox" checked>
<input type="text" disabled>

Estos dos atributos (checked y disabled) se consideran activos, sin importar si escribes:

checked="checked"
checked=""
checked

Todos esos formatos son válidos y equivalentes para el navegador. Por eso cuando manipulamos estos atributos con JavaScript, necesitamos prestar atención a cómo interactúan con las propiedades del DOM.

Acceder a un atributo booleano

Podemos verificar si un atributo booleano está presente con hasAttribute() o leer su valor textual con getAttribute(). Sin embargo, la forma más confiable y actualizada de consultar su estado real es a través de la propiedad del DOM equivalente.

Ejemplo con un checkbox:

<input type="checkbox" id="terminos" checked>

const checkbox = document.getElementById("terminos");

console.log(checkbox.checked);             // true (estado actual)
console.log(checkbox.getAttribute("checked")); // "checked" (valor HTML)
console.log(checkbox.hasAttribute("checked")); // true

La propiedad checkbox.checked refleja el estado actual del checkbox, que puede haber cambiado por una acción del usuario. En cambio, getAttribute("checked") muestra solo lo que está en el HTML original.

Modificar atributos booleanos: propiedad vs atributo

Forma recomendada: usar propiedades del DOM:

checkbox.checked = false;  // Desmarca el checkbox
boton.disabled = true;     // Desactiva un botón
campo.required = true;     // Hace un campo obligatorio

Estas propiedades afectan directamente al comportamiento del elemento y actualizan el estado en tiempo real, incluso si el atributo HTML original no cambia.

Forma válida pero menos ideal: usar setAttribute()

checkbox.setAttribute("checked", "");  // Marca el checkbox
checkbox.removeAttribute("checked");   // Desmarca el checkbox

Aunque setAttribute() también es funcional, puede no reflejar el estado actual del elemento si el usuario interactúa con él. Esto puede generar inconsistencias si no sincronizas correctamente atributo y propiedad.

Eliminar atributos booleanos

Para desactivar un atributo booleano, lo más seguro es usar la propiedad del DOM, pero también puedes eliminar el atributo directamente si solo necesitas modificar el HTML:

campo.readOnly = false; // Quita el estado de solo lectura
campo.removeAttribute("readonly"); // Elimina el atributo del HTML

Ambos métodos eliminan el efecto del atributo, pero solo la propiedad asegura que el comportamiento cambie inmediatamente en el navegador.

Errores comunes al trabajar con atributos booleanos

❌ Error: establecer el atributo como true esperando un efecto inmediato

checkbox.setAttribute("checked", true); // Esto se convierte en checked="true", que no es estándar

Aunque el navegador lo puede interpretar correctamente, no es lo más limpio ni semántico.
✅ Solución:

checkbox.checked = true; // Forma clara y moderna

❌ Error: confiar en getAttribute() para obtener el estado actual

if (checkbox.getAttribute("checked") === "checked") {
  // Esto puede estar desactualizado si el usuario ya lo desmarcó
}

✅ Solución:

if (checkbox.checked) {
  // Esto refleja el estado actual del checkbox
}

Aunque se pueden manipular ambos, las propiedades DOM son la mejor forma de leer y modificar atributos booleanos en tiempo real. Usar atributos HTML (setAttribute(), removeAttribute()) es útil para modificar el marcado, pero no garantiza el control total del comportamiento dinámico.

Conclusión

Los atributos booleanos tienen una sintaxis y un comportamiento únicos que pueden llevar a errores sutiles si se manipulan incorrectamente.

En este artículo aprendiste a:

• Reconocer qué son los atributos booleanos y cómo funcionan en HTML.
• Leer su estado actual con propiedades del DOM como checked, disabled, readonly.
• Modificarlos correctamente sin caer en inconsistencias entre atributos y propiedades.
• Usar setAttribute() y removeAttribute() solo cuando sea necesario.

Con este artículo cerramos el bloque sobre manipulación de atributos en el DOM. En el siguiente bloque aprenderás a controlar los estilos y clases de los elementos HTML, una herramienta clave para construir interfaces visuales dinámicas y bien estructuradas.