輸入值總和的邏輯

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);
  }
});