When use backspace or delete button submit button color not changes

I have an HTML form where submit button is disabled when input value is less than 10. The button changes its color when input value becomes greater than 10.

Problem comes when I use backspace or delete button to remove input value, submit button color does not change to disabled button until I refresh the page.

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>

---

You change the colors once the value reaches 10, but you never change them back. You can set them to an empty string ( "" ) to get back to the original colors before you set them. (See jQuery - remove style added with .css() function).

Fixed code below:

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>

---

在这里你可以找到解决方案

$('#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>

---

Try keyup event. Use class for styling and toggle it.

 $("#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
    }

Demo: http://jsfiddle.net/GCu2D/2207/

链接地址: http://www.djcxy.com/p/94886.html

上一篇: 重置Jquery颜色选择器输出样式

下一篇: 当使用退格或删除按钮提交按钮颜色不变时