0

trabajo en un proyecto y quiero que al habilitar el checkbox se me inhabilite la entrada de texto de tal manera que el usuario no pueda ingresar datos en el. Tampoco he podido reducir el tamaño del input type="text" ya que ocupa la página de lado a lado. El cambio debo hacerlo vía HTML y trabajamos con Bootstrap. Gracias!.

<div class="row">
<div class="col-md-6">
    <div class = "checkbox-control">
        <input aplicacion="2" cliente="Empresa.Cliente" cols="100" data-val="true" data-val-required="El campo es obligatorio." id="PassIlimitada" name="PassIlimitada" ngmodelparent="configuracion" ng_model="configuracion.PassIlimitada" placeholder="Contraseña" rows="5" type="checkbox" value="true" class="ng-pristine ng-untouched ng-valid"><input name="PassIlimitada" type="hidden" value="false">
    </div>
</div>
<p><b>Días vencimiento de la contraseña</b></p>
<input type="text" class="form-control" ng-model="configuracion.Minutos" placeholder="Días" >

1 respuesta 1

1

Con jQuery puedes lograr que el input se active/inactive tal como lo necesitas.

Para controlar el tamaño del input, puedes usar CSS

$(document).ready(function(){ 
    $("#check").click(function() {  
        if($("#check").is(':checked')) {  
             $("#dias").attr("disabled", true);
        } else {  
            $("#dias").attr("disabled", false); 
        }  
    }); 
});
.row {
  margin: 5px;
  padding: 10px;
}

#vencimiento {
  font-weight: bold;
}

#dias {
  width: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-lg-12">
    <div class = "checkbox-control">
        <input id="check" aplicacion="2" cliente="Empresa.Cliente" cols="100" data-val="true" data-val-required="El campo es obligatorio." id="PassIlimitada" name="PassIlimitada" ngmodelparent="configuracion" ng_model="configuracion.PassIlimitada" placeholder="Contraseña" rows="5" type="checkbox" value="true" class="ng-pristine ng-untouched ng-valid">
        <input name="PassIlimitada" type="" value="false">
    </div>
</div>
<div class="row">
  <div class="col-md-6 col-lg-12">
    <label id="vencimiento">Días vencimiento de la contraseña</label>
    <input type="text" class="form-control" id="dias" ng-model="configuracion.Minutos" placeholder="Días" >
  </div>
</div>

3
  • Me encanta esta solución, pero internamente tengo un problema para ejecutarla. Tal vez tengas una idea de hacerlo en el HTML unicamente? Muchas gracias ! Commented el 15 mar. 2019 a las 17:10
  • @NicoFlorez El tamaño, si... con estilos en línea que no es muy recomendable pero es válido: <input type="text" class="form-control" id="dias" ng-model="configuracion.Minutos" placeholder="Días" style="width: 50%;">. Para activar/desactivar... veo que usas directivas de AngularJS... No conozco mucho del tema pero tal vez esta información pueda ayudarte un poco, allí veo un ejemplo con lo que necesitas. Perdón por no poder ayudarte más, pero mi escaso conocimiento aún no llega tan lejos.
    – DjCrazy
    Commented el 15 mar. 2019 a las 20:47
  • Excelente ! me sirvió bastante ... Muchas Gracias ! Commented el 15 mar. 2019 a las 22:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.