条件满足时移除提交按钮的禁用功能答案

【问题标题】：Remove disabled function of Submit button when condition fulfills条件满足时移除提交按钮的禁用功能
【发布时间】：2018-04-10 12:44:00
【问题描述】：

我有一个表格。这里在禁用的提交按钮中，我做了以下功能，当余额值大于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>

【问题讨论】：

:submit 是什么意思
你需要使用$("#submit")
不，@FerasAlSous，$(':submit') 是对的。见：api.jquery.com/submit-selector
@achalnaskar，您的 ID 错误。改用：$('#totl').val() >= 10。你有 2 个id="totl"

标签： javascript forms submit

【解决方案1】：

（代码本身中的 cmets - 您还会在代码下方找到一些“最佳实践建议”，以避免很多麻烦；））

  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 ) { ... }

【讨论】：

谢谢。我的问题解决了。我会执行你的建议。