Question

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

Answer 1

（代码本身的评论 - 您还会在代码下方找到一些“最佳实践建议”，以避免大量的预测;））

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

当条件满足

1 个答案: