Tengo un formulario HTML en el que el botón Enviar está deshabilitado cuando el valor de entrada es menor que 10. El botón cambia de color cuando el valor de entrada es mayor que 10.

El problema surge cuando uso el botón de retroceso o de eliminación para eliminar el valor de entrada, el color del botón de envío no cambia al botón deshabilitado hasta que actualice la página.

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
  }
}, 10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>
2
achal naskar 30 oct. 2017 a las 09:14

5 respuestas

La mejor respuesta

Cambia los colores una vez que el valor alcanza 10, pero nunca los vuelve a cambiar. Puede configurarlos en una cadena vacía ("") para volver a los colores originales antes de configurarlos. (Consulte jQuery - eliminar el estilo agregado con la función .css () ).

Código fijo a continuación:

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
    // Remove the custom colors we added.
    $('#submit').css({"background-color": "", "color": ""});
  }
}, 10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

(Tenga en cuenta que, como otros señalan, es mejor monitorear input para detectar cambios en lugar de usar un temporizador).

2
user94559 30 oct. 2017 a las 06:21

Aquí tienes una solución

$('#tot2').keyup(function(){
  if(parseInt($(this).val()) < 10 || $(this).val().length  === 0) {
    $('#submit')
      .attr('disabled', 'disabled')
      .removeClass('active');
  } else {
    $('#submit')
      .removeAttr('disabled')
      .addClass('active');
  }
});
.active {
  background: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>
1
Shiladitya 30 oct. 2017 a las 06:19

Debe usar la función keyup o keypress, y en lugar de establecer el estilo en línea, use addClass de esta manera:

$('#tot2').keyup(function() {
  var val = $(this).val();
  if (val >= 10) {
    $("#submit").removeAttr("disabled");
    $("#submit").addClass('NewSub');
  } else {
    $("#submit").attr("disabled", "disabled");
    $("#submit").removeClass('NewSub');  
  }
});
.NewSub {
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post">
  <input type="text" name="balance" id="tot2" value="" />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>
1
Pedram 30 oct. 2017 a las 06:21

Prueba el evento keyup. Use class para peinar y alternar.

 $("#tot2").on("keyup", function() {
    var elem = $(this);
    if (elem.val() >= 10) {
        $("#submit").removeAttr("disabled").addClass("active");
    } else {
        $("#submit").attr("disabled", "disabled").removeClass("active");
    }
});

Css:

active {
        background-color: blue;
        color: white
    }

Demostración: http://jsfiddle.net/GCu2D/2207/

1
K K 30 oct. 2017 a las 06:21

En lugar de usar el tiempo interval, simplemente puede hacerlo así:

$('#tot2').on('change', function(){
  if($('#tot2').val() < 10) 
    $('#submit').attr('disabled', 'disabled');
  else  $('#submit').removeAttr('disabled');
});
-1
Pedram 14 ene. 2018 a las 09:28