当使用退格或删除按钮提交按钮颜色不变时
我有一个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> 一旦数值达到10，你就改变颜色，但你永远不会改变它们。 您可以将它们设置为空字符串（ "" ），以便在设置它们之前返回到原始颜色。 （请参阅jQuery - 使用.css（）函数添加的删除样式）。
下面的固定代码：
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>尝试关键事件。 使用类来创建样式并切换它。
$("#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
}
演示：http://jsfiddle.net/GCu2D/2207/
链接地址: http://www.djcxy.com/p/94885.html上一篇: When use backspace or delete button submit button color not changes