Checkbox deshabilitados con Bootstrap

03/Nov/2015 Bootstrap

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.

Lo primero será partir de nuestro checkbox deshabilitado en HTML.

  1. <input type="checkbox" value="" disabled>
  2. Opción deshabilitada
  3. </label>

Ahora lo convertimos en un checkbox adaptado para Bootstrap. Para ello lo recubrimos de una capa que incluya la clase checkbox.

  1. <div class="checkbox">
  2. <input type="checkbox" value="" disabled>
  3. Opción deshabilitada
  4. </label>
  5. </div>

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.

  1. <div class="checkbox disabled">
  2. <input type="checkbox" value="" disabled>
  3. Opción deshabilitada
  4. </label>
  5. </div>

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D