Cuando estamos creando un formulario e insertamos un checkbox podemos deshabilitar su uso incluyendo el atributo disabled dentro del elemento input. Este atributo consigue que no podamos marcar el checkbox. Si bien los checkbox deshabilitados con Bootstrap nos dan la posibilidad de ampliar la funcionalidad de estos y conseguir que esté deshabilitado tanto el checkbox como el texto que lo acompaña. Veamos cómo hacerlo.
💼 Empleos tech relacionados:
- Especialista de TI y Desarrollo Web · SUMINISTROS HERBOLARIOS Y QUIMICOS
- Especialista en Desarrollo Web · Universidad Anáhuac Mayab
2,909 vacantes activas en LATAM · ver todas → · ⭐ Opiniones en Google
¿En qué te ayudamos hoy?
🎓 Cursos confirmados con 50% OFF hoyInicia 24 Oct — cupo limitado para lectores del blog:
-
💬 Consultor en Git Desde Cero
· Inicia 24 Oct · sabatino ·
$5,900$2,950 (-50%) MXN -
💬 Consultor API REST con .Net Core
· Inicia 14 Nov · sabatino ·
$10,930$5,465 (-50%) MXN -
💬 Consultor AWS Despliegue de Apps
· Inicia 21 Nov · sabatino ·
$8,130$4,065 (-50%) MXN
Por WhatsApp en horario habil · ver todos los cursos → · ⭐ Opiniones en Google
Lo primero será partir de nuestro checkbox deshabilitado en HTML.
-
<input type=»checkbox» value=»» disabled>
-
Opción deshabilitada
-
</label>
Ahora lo convertimos en un checkbox adaptado para Bootstrap. Para ello lo recubrimos de una capa que incluya la clase checkbox.
Y lo siguiente será añadirle la clase disabled dentro de la misma clase dónde teníamos la clase checkbox. De esta forma habremos conseguido tener checkbox deshabilitados con Bootstrap.
-
<div class=»checkbox disabled»>
-
<input type=»checkbox» value=»» disabled>
-
Opción deshabilitada
-
</label>
-
</div>
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
💼 Empleos tech relacionados:
- Especialista de TI y Desarrollo Web · SUMINISTROS HERBOLARIOS Y QUIMICOS
- Especialista en Desarrollo Web · Universidad Anáhuac Mayab
2,909 vacantes activas en LATAM · ver todas → · ⭐ Opiniones en Google



