如果输入达到最大值，第二个可以有最大值 -1

Question

我有一个表格，这是 jQuery 代码和 HTML。如您所见，该表单有 8 个输入字段，分为 4 对。每个输入只能有从 0 到 4 的值。我怎样才能实现这种行为：

如果其中一个输入字段的值为 4，则该对中的第二个输入字段的最大值可以为 3。

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
        if((currentVal) > 2) {
$('input[field='+fieldName+'].qtyplus').attr("disabled", true);
}
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
        }
        if((currentVal) <= 4) {
$('input[field='+fieldName+'].qtyplus').attr("disabled", false);
}
    });
});

    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity'/><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity2' />
    <input type='text' name='quantity2' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity2' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity3' />
    <input type='text' name='quantity3' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity3' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity4' />
    <input type='text' name='quantity4' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity4' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity5' />
    <input type='text' name='quantity5' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity5' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity6' />
    <input type='text' name='quantity6' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity6' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity7' />
    <input type='text' name='quantity7' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity7' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity8' />
    <input type='text' name='quantity8' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity8' />

Answer 1

您需要先设置您的配对以便轻松互动。

有很多方法可以实现这种行为，这里是一种快速且容易理解的方法：

Fiddle

代码和演示：

$(function(){
    //Your max / min values:
    var maxValue = 4;
    var minValue = 0;
        // First mark your pairs:
        $('.qty').each(function(index,ele) {
           if (index%2 == 0)
      $(ele).attr('pair',index).data('valuemax',maxValue);
        else
      $(ele).attr('pair',index-1).data('valuemax',maxValue);
        });
      
        // This button will increment the value and if needed the valuemax
        $('.qtyplus').click(function(e){
            e.preventDefault();
            $ele = $(this).prev();
            value = parseInt($ele.val());
            if (value+1 <= $ele.data('valuemax')) { 
                $ele.val(value+1); 
            }
            if ($ele.val() == maxValue) {
                $sec = $('input[pair='+$ele.attr('pair')+']').not($ele);
                $sec.data('valuemax',maxValue-1); 
            }
        });
        // This button will decrement the value and if needed the valuemax
        $(".qtyminus").click(function(e) {
            e.preventDefault();
            $ele = $(this).next();
            value = parseInt($ele.val());
            if (value-1 >= minValue) { $ele.val(value-1); }
            if (value == maxValue) {
                $sec = $('input[pair='+$ele.attr('pair')+']').not($ele);
                $sec.data('valuemax',maxValue); 
            }
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity'/><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity2' />
    <input type='text' name='quantity2' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity2' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity3' />
    <input type='text' name='quantity3' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity3' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity4' />
    <input type='text' name='quantity4' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity4' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity5' />
    <input type='text' name='quantity5' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity5' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity6' />
    <input type='text' name='quantity6' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity6' />

<br/><br/><br/>

    <input type='button' value='-' class='qtyminus' field='quantity7' />
    <input type='text' name='quantity7' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity7' /><br/><br/>
 
 <input type='button' value='-' class='qtyminus' field='quantity8' />
    <input type='text' name='quantity8' value='0' class='qty' readonly />
    <input type='button' value='+' class='qtyplus' field='quantity8' />

如果输入达到最大值，第二个可以有最大值 -1

If input reaches max value, the second can have max value -1

jquery

input-field