2

Estoy tratando de bloquear y desbloquear un botón dependiendo del valor de un input text , el cual viene de una base de datos. El valor es un estado y básicamente lo que debe hacer es que si un registro tiene un estado x en un combo box, se debe bloquear un botón. Esto ya lo he hecho con un ejemplo simple que hice para mostrar en esta plataforma, pero deja de funcionar cuando recargo la pagina.

aquí dejo el código.

<!DocType:html>
<html>

<head>

<title></title>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

<h1>Pruebas combo y boton</h1>

<form>
<label>Estado:</label>

<select id="idCombo">
<option value='DISPONIBLE'>DISPONIBLE</option>

<option>NO DISPONIBLE</option>

</select>

<button type="button" id="idBoton">VER</button>

</form>

<script>

$("#idCombo").change(function() {

if( $("#idCombo").val()=="DISPONIBLE"){
    $( "#idBoton" ).prop( "disabled", true );    
}else{
    $( "#idBoton" ).prop( "disabled", false );
}   

});

</script>

</body>

</html>

Acá las imagenes. Al iniciar la pagina, el combo tiene el valor "DISPONIBLE" y el botón está habilitado.

introducir la descripción de la imagen aquí

Si se selecciona la otra opción y después de selecciona la opción "DISPONIBLE", ahí recién se bloquea el botón.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

y si se recarga la pagina, el botón se vuelve a habilitar aunque tenga el valor "DISPONIBLE".

Como se podría hacer para que el combo se bloquee automáticamente si este muestra el valor "DISPONIBLE"?

2 respuestas 2

1

Puedes hacerlo llamando explicitamente al handler del cambio con trigger() asi:

<!DocType:html>
<html>

<head>

<title></title>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

<h1>Pruebas combo y boton</h1>

<form>
<label>Estado:</label>

<select id="idCombo">
<option value='DISPONIBLE'>DISPONIBLE</option>

<option>NO DISPONIBLE</option>

</select>

<button type="button" id="idBoton">VER</button>

</form>

<script>

$("#idCombo").change(function() {

if( $("#idCombo").val()=="DISPONIBLE"){
    $( "#idBoton" ).prop( "disabled", true );    
}else{
    $( "#idBoton" ).prop( "disabled", false );
}   

});
$("#idCombo").trigger("change");
</script>

</body>

</html>

2
  • 1
    Si me sirvió es justamente eso muchas gracias. Commented el 10 jun. 2019 a las 17:02
  • hola sabes como te mencioné ayer, la función me sirvió, pero tengo un problema ya que al cerrar el modal y luego abrirlo de nuevo en otro registro se queda des habilitado el botón aunque el registro tenga otro estado. hice otra pregunta referente a eso pero no he tenido respuestas. la pregunta se llama "Problema validación pegada en combo box y bloqueo de botones de ventana modal". Por favor si me podrías ayudar. Commented el 11 jun. 2019 a las 23:32
0

Tu error es que ejecutas la función solo cuando cambia el valor del combo box, una solución fácil es añadir:

 $(document).ready(function () {
    if( $("#idCombo").val()=="DISPONIBLE"){
        $( "#idBoton" ).prop( "disabled", true );    
    }else{
        $( "#idBoton" ).prop( "disabled", false );
    }
  });

que lo que hace es comprobar el valor del combobox también cuando se inicia la página

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.