我有一个表格。在禁用的提交按钮中，我做了以下功能，当余额值大于10时，它将删除其禁用功能。我的脚本不工作。当余额大于 10 时，有没有办法取消提交按钮的禁用功能？
<script >
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.add_form.obalance.value;
two = document.add_form.debit.value;
document.add_form.balance.value = (one * 1) - (two * 1);
}
function stopCalc(){
clearInterval(interval);
}
</script>
我的 html 表单:
<html>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="obalance" id="obal" value="" onFocus="startCalc();"
onBlur="stopCalc();" >
<input type="text" name="debit" id="totl" value="" onFocus="startCalc();"
onBlur="stopCalc();" />
<input type="text" name="balance" id="totl" value="" />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</html>
删除提交按钮禁用属性的脚本:
<script >
setInterval(function () {
if ($('#balance').val() >= 10){
$(":submit").removeAttr("disabled");
}
else{
$(":submit").attr("disabled", "disabled");
alert('Your Balance is less than 10');
}
}, 1);
</script>
最佳答案
(代码本身的注释——您还会在代码下方找到一些“最佳实践建议”，以避免很多麻烦；))
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.add_form.obalance.value;
two = document.add_form.debit.value;
document.add_form.balance.value = (one * 1) - (two * 1);
}
function stopCalc(){
clearInterval(interval);
}
setInterval(function () {
/*************************************
v----------- ID error (fixed) */
if ($('#tot2').val() >= 10){
$(":submit").removeAttr("disabled");
}
else{
$(":submit").attr("disabled", "disabled");
// alert('Your Balance is less than 10');
}
}, 10); // 1 is too much?input#submit[disabled] {
background-color: red; color: white; opacity:.2;
}
input#submit:not(disabled) {
background-color: green; 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="obalance" id="obal" value="" onFocus="startCalc();"
onBlur="stopCalc();" >
<input type="text" name="debit" id="tot1" value="" onFocus="startCalc();" onBlur="stopCalc();" />
<!-- ID error (fixed) -------------^ -->
<input type="text" name="balance" id="tot2" value="" /> <!--
<!-- ID error (fixed) -------------^ -->
<input type="submit" id="submit" name="submit" disabled="disabled" />顺便说一句，你是否使用jQuery。对一堆代码使用 jQuery 而对另一个代码使用纯 DOM 确实很容易出错。
例如，在您上面的代码中，document.add_form.balance 和 $('#tot2') 处理相同的 DOM 元素，但它们的名称完全不同，没有理由。
难以阅读，难以调试，容易出错。
如果您的代码在文档准备好后工作，例如您应该将您的字段放在具有不言自明名称的变量中:
let balanceField /* or whatever name you want */ = $('#balance') ;
let debitField = $('#debit') ;
let totalField = $('#total') ;
然后，在您的代码中，您使用这些变量而不是硬值:
let one = balanceField.val() || 0 ;
let two = debitField.val() || 0 ;
totalField.val( one + two ) ;
或者，更短、仍然可读且富有表现力的(但前提是您不再需要 one 和 two 值):
totalField.val( (balanceField.val()||0) + (debitField.val()||0) ) ;
还有:
if ( debitField.val() > 9 ) { ... }
关于javascript - 条件满足时移除提交按钮的禁用功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46999967/