输入值总和的逻辑

Question

我创建了 4 个带有加号和减号的输入框来增加和减少值。我想制定一个逻辑，一旦所有 4 个值的总和达到 5，它应该禁用加号按钮并且不允许用户添加更多。

这是 HTML：

<div id="field1">field 1
    <button type="button" id="sub" class="sub">-</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
    <button type="button" id="sub2" class="sub">-</button>
    <input type="text" id="2" value="0" class="field" />
    <button type="button" id="add2" class="add">+</button>
</div>

<div id="field2">field 3
    <button type="button" id="sub3" class="sub">-</button>
    <input type="text" id="3" value="0" class="field" />
    <button type="button" id="add3" class="add">+</button>
</div>

<div id="field2">field 4
    <button type="button" id="sub4" class="sub">-</button>
    <input type="text" id="4" value="0" class="field" />
    <button type="button" id="add4" class="add">+</button>
</div>

这是我用来增加/减少值的 jQuery：

$("input").prop('disabled', true);

$('.add').click(function () {
    $(this).prev().val(+$(this).prev().val() + 1);    
});

$('.sub').click(function () {
    if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);    
});

Answer 1

这应该有效

$('.add').click(function () {
var value1 = $('#field1').find('input').val();
var value2 = $('#field2').find('input').val();
var value3 = $('#field3').find('input').val();
var value4 = $('#field4').find('input').val();
  if ( value1 + value2 + value3 + value4 >= 5){
    $('.add').prop('disabled', true);
  } else {
    $(this).prev().val(+$(this).prev().val() + 1);
  }
});