Validación HTML: El atributo "readonly" solo está permitido cuando el tipo de input es "date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url" o "week".

Acerca de este problema HTML

La especificación HTML restringe el atributo readonly a tipos de input donde el usuario normalmente escribiría o seleccionaría un valor textual/numérico/de fecha. La idea es sencilla: readonly significa “puedes ver y seleccionar este valor, pero no puedes editarlo.” Ese concepto solo tiene sentido para campos que contienen texto editable o datos estructurados como fechas y números. Para controles como checkboxes, botones de radio, selectores de color, selectores de archivos, y deslizadores de rango, el modelo de interacción es fundamentalmente diferente — no hay texto que hacer “solo lectura.”

La lista completa de tipos de input que soportan readonly es:

text
search
url
tel
email
password
date
month
week
time
datetime-local
number

El atributo readonly no es válido en estos tipos: checkbox, radio, range, color, file, hidden, button, submit, reset, e image.

Por qué esto importa

Conformidad con los estándares: Los navegadores no están obligados a respetar readonly en tipos de input no soportados. Incluso si un navegador parece respetarlo hoy, ese comportamiento no está garantizado y podría cambiar.

Comportamiento de envío de formularios: Hay una diferencia crítica entre readonly y disabled. El valor de un campo readonly está incluido en los datos de envío del formulario, mientras que el valor de un campo disabled no lo está. Si cambias readonly por disabled para corregir este error, ten en cuenta que el valor del campo no se enviará con el formulario a menos que tomes medidas adicionales (como agregar un input oculto).

Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia dependen de HTML válido para transmitir el estado correcto de los controles de formulario. Usar readonly en un tipo no soportado puede enviar señales confusas sobre la interactividad del control.

Cómo solucionarlo

Tienes varias opciones dependiendo de tu objetivo:

Eliminar readonly si se agregó por error o no es necesario.
Cambiar el tipo de input a uno que soporte readonly, si eso se ajusta a tu caso de uso.
Usar disabled en su lugar para prevenir la interacción en inputs no textuales. Recuerda que los campos deshabilitados se excluyen del envío del formulario.
Combinar disabled con un input oculto si necesitas que el valor se envíe con el formulario pero quieres que el control visible no sea interactivo.

Ejemplos

Inválido: `readonly` en un checkbox

<input type="checkbox" name="agree" readonly>

Inválido: `readonly` en un input range

<input type="range" name="volume" min="0" max="100" value="50" readonly>

Inválido: `readonly` en un input color

<input type="color" name="theme" value="#ff0000" readonly>

Corregido: usando `readonly` en un tipo de input soportado

<input type="text" name="code" value="ABC-123" readonly>
<input type="email" name="contact" value="user@example.com" readonly>
<input type="date" name="start" value="2024-01-15" readonly>

Corregido: usando `disabled` para un input no textual

<input type="checkbox" name="agree" checked disabled>

Corregido: usando `disabled` con un input oculto para preservar el envío del formulario

Si necesitas que el valor se envíe con el formulario mientras mantienes el control visible no interactivo, combina un control disabled con un input hidden:

<!-- El input oculto asegura que el valor se envíe -->

<input type="hidden" name="agree" value="on">
<!-- El checkbox deshabilitado es visible pero no interactivo -->

<input type="checkbox" name="agree_display" checked disabled>
<label for="agree_display">Acepto los términos</label>

Corregido: usando JavaScript para prevenir cambios (avanzado)

Si realmente necesitas un checkbox que parezca interactivo pero no pueda cambiarse, puedes usar JavaScript mientras mantienes el HTML válido:

<input type="checkbox" name="agree" checked onclick="return false;">

Ten en cuenta que este enfoque depende de JavaScript y no funcionará si el scripting está deshabilitado. Para la mayoría de casos, usar disabled (con o sin un input oculto complementario) es la solución más simple y robusta.