javascript - 使用退格键或删除按钮时，提交按钮颜色不会改变

Question

我有一个 HTML 表单，当输入值小于 10 时，提交按钮被禁用。当输入值大于 10 时，按钮会改变颜色。

当我使用退格键或删除按钮删除输入值时出现问题，提交按钮颜色在我刷新页面之前不会更改为禁用按钮。

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>

Answer 1

一旦值达到 10，您就可以更改颜色，但您永远不会将它们改回来。您可以将它们设置为空字符串 ("") 以在设置它们之前返回到原始颜色。 (参见 jQuery - remove style added with .css() function)。

固定代码如下:

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>

(请注意，正如其他人指出的那样，最好监视 input 的变化而不是使用计时器。)