jquery bootstrap Validation：多个输入值的总和，如果不等于其他输入字段，则禁用提交按钮

Question

我有两个输入字段类别。 div 类 total_investement_expenses 类有 4 个输入字段。每个都有一个类 pr，第二个 div 类 source_income 有两个输入字段，每个都有一个名为 prc 的类名。

 $('.source').on('input','.prc',function(){
            totalSum=0;
            $('.source .prc').each(function(){
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) {
                    totalSum += parseFloat(inputVal);
                }
            })
            $('#sourceSum').text(totalSum);
        });
        // console.log(totalSum+" self_inital and loan values");
        $('.expense').on('input','.pr',function(){
            var totalExpense=0;
            $('.expense .pr').each(function(){
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) {
                    totalExpense += parseFloat(inputVal);
                }
            })
            $('#totalExpense').text(totalExpense);
        });
 $('form[data-toggle="validator"]').bootstrapValidator();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<div class="total_investement_expenses">

  <div class="form-group expense">

    <label for="land_expenses">Land Expenses</label><input type="text" name="land_expenses" value=""  class="form-control pr" id="land_expenses" required="required" placeholder=""  />

  </div>

  <div class="form-group expense">
   <label for="equipment_machinery">Equipment Machinery</label>           <input type="text" name="equipment_machinery" value=""  class="form-control pr" id="equipment_machinery" required="required" placeholder=""  />

 </div>

 <div class="form-group expense">
   <label for="asset_capital">Asset Capital</label>           <input type="text" name="asset_capital" value=""  class="form-control pr" id="asset_capital" required="required" placeholder=""  />

 </div>
 <div class="form-group expense">
  <label for="working_capital">Working Capital</label>        <input type="text" name="working_capital" value=""  class="form-control pr" id="working_capital" required="required" placeholder=""  />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income" >

  <div class="form-group source">
   <label for="self_inital">Own Equity</label>
   <input type="text" name="self_inital" value=""  class="form-control prc" id="self_inital" placeholder="" required="required"  />
 </div>

 <div class="form-group source">
   <label for="loan">Loan</label>       <input type="text" name="loan" value=""  class="form-control prc" id="loan" placeholder=""  />

 </div>
 <div class="form-group">
  <label>Total:</label> <span id="sourceSum">  </span>
</div>

</div>

我可以看到两个输入字段类的总和，但我的问题是如果不等于我想使用回调禁用提交按钮。

Answer 1

我不确定我是否正确理解了您的问题。但是，我已经为您准备了一个示例 sn-p，以防万一我的假设是正确的。好吧，您必须将总变量移出事件范围，并在这些事件发生后执行简单的检查。喜欢：

let totalSum = 0;
let totalExpense = 0;
$('.source').on('input', '.prc', function() {
  totalSum = 0;
  $('.source .prc').each(function() {
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) {
      totalSum += parseFloat(inputVal);
    }
  })
  $('#sourceSum').text(totalSum);
  checkSubmitBtn();
});
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input', '.pr', function() {
  totalExpense = 0;
  $('.expense .pr').each(function() {
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) {
      totalExpense += parseFloat(inputVal);
    }
  })
  $('#totalExpense').text(totalExpense);
  checkSubmitBtn();
});
//$('form[data-toggle="validator"]').bootstrapValidator();
checkSubmitBtn();


function checkSubmitBtn() {
  $('#submitBtn').prop('disabled', totalExpense != totalSum || (totalSum == 0 || totalExpense == 0));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
<div class="form-group expense">
  <label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income">

  <div class="form-group source">
    <label for="self_inital">Own Equity</label>
    <input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
  </div>

  <div class="form-group source">
    <label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />

  </div>
  <div class="form-group">
    <label>Total:</label> <span id="sourceSum">  </span>
  </div>

  <input type='button' value='Submit' id='submitBtn' />

</div>