20 - form : control y grupo de controles HTML deshabilitados

Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.


Para deshabilitar un único control de formulario HTML debemos insertar la propiedad disabled al control respectivo.
En el caso que necesitemos deshabilitar un conjunto de controles agrupados en una marca HTML fieldset le asignamos la propiedad disabled a dicha marca.

Problema

Implementar un formulario que contenga un fieldset deshabilitado y por otro lado un control checkbox en forma independiente deshabilitado.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">

  <form role="form">
    <fieldset disabled> 
      <div class="form-group">
        <label for="usuario">Nombre de usuario:</label>
        <input type="text" class="form-control" id="usuario">
      </div>
      <div class="form-group">
        <label for="clave">Ingrese clave:</label>
        <input type="password" class="form-control" id="clave">
      </div>
     </fieldset>
     <div class="checkbox">
       <label>
         <input type="checkbox" value="" disabled>
          Acepta términos y condiciones
         </label>
     </div>
     <div class="form-group">
       <button type="submit" class="btn btn-default">Entrar</button>
     </div>
     
  </form>

  </div> 
</body> 
</html> 

En el navegador tenemos como resultado los dos controles del fieldset deshabilitados, de la misma forma el control checkbox aparece deshabilitado:

bootstrap form control disabled

Luego lo único que debemos hacer es definir la propiedad disabled en el fieldset:

    <fieldset disabled> 

Y para desactivar solo un control de formulario debemos fijar la propiedad disabled para el control en particular:

         <input type="checkbox" value="" disabled>

Bootstrap se encarga de colorear el o los controles cuando asignamos la propiedad disabled.

Ejecutar Ejemplo

Retornar