javascript - 输入字段的总和不能大于账户余额

Question

我正在尝试让用户向包含每个产品的输入字段的某些产品添加美元金额。棘手的部分是所有字段的总和不能超过其帐户余额。

我似乎不知道如何检测所有输入字段是否超过余额，然后将超过余额的输入字段设置为剩余余额。或者，如果剩余余额已经为零，则输入字段中输入的数字将切换为零/不会发生任何操作。

我在这里创建了一个 JSFiddle。 https://jsfiddle.net/12agemfe/1/

var qty = $('input[type=text]');
var accountbalance = parseInt($('#accountbalance').text());
var removebalance;
var newbalance;

$('input').on('focusout', function() {
  //set removebalance to zero each time
  removebalance = 0;
  //get total from all input fields
  $(qty).each(function() {
    removebalance += parseFloat($(this).val());
  });
  //set current balance
  newbalance = (parseFloat(accountbalance).toFixed(2) 
                - parseFloat(removebalance).toFixed(2));
  //Needs to set input to zero and not update #accountbalance
  //if entering more than #account balance
  //Needs to correct input value if entered more than remaining balance
  if (newbalance < 0) {
    alert('You Can Not Cash out more than your Balance!');
    return false;
  }
  //once input fields are totaled, update the balance on the screen
  //should not allow negative balance and needs two decimal points
  //  parseFloat.fixedTo(2)
  $('#accountbalance').text(newbalance);
});

//Cant submit if input is more than balance
$('input[type=submit]').click(function() {
  if (newbalance < 0) {
    alert('You Can Not Cash out more than your Balance!');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
  <input type="text" name="value[]" value="0.00">
</form>

<div id="accountbalance">500</div>
<button id="submit">Submit</button>

Answer 1

我对你的 jsfiddle 中的 fork 脚本进行了轻微的更改。这里是 - https://jsfiddle.net/xqhnyf0k/2/

最重要的变化是newbalance低于0的结果。在这种情况下，我们必须将输入值更改为值-(低于0的值)。

if (newbalance < 0) {
 alert('You Can Not Cash out more than your Balance!');
 //my code
 $('#accountbalance').text("0.00"); //set 0 in balance UI
 $(this).val(parseFloat(parseFloat($(this).val())+newbalance).toFixed(2)); //set currently changing input val to val +newbalance so if balance is minus it will left only possible amount
 //end of my code
 return false;
}

其他更改与修复 float 和 float 操作的转换有关。例如来自:

newbalance = (parseFloat(accountbalance).toFixed(2) 
            - parseFloat(removebalance).toFixed(2));

至

newbalance = (parseFloat(accountbalance) - parseFloat(removebalance));

更改很重要，因为 toFixed( http://www.w3schools.com/jsref/jsref_tofixed.asp ) 将数字转换为字符串，因此您可以对字符串而不是数字进行操作。方法 toFixed 只能用于演示。