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

Question

I got a form, here's the jQuery code and HTML. As you can see, the form has 8 input fields which are divided into 4 pairs. Every input can have only values from 0 to 4. How can I achieve this behavior:

If one of the input fields has the value 4, the second input field in the pair can have max value of 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' />

Could you make a http://jsfiddle.net/ or http://codepen.io/ that way it looks way less messy (: — wawa, Apr 20 '15 at 22:32

Shlomi Hassid · Accepted Answer · 2015-04-20T23:22:43.257

You need first to set your pairs to easily interact.

There are many ways to achieve this kind of behavior here is one - quick and easy way to understand:

Fiddle

Code & demo:

$(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' />

Thank you very much. And could you please tell me how to make it also work like that: the first pair can have maxValue of 4 and the second pair can have maxValue of 3 (so one of input in this pair can have 3 and the second can has 2) etc? I mean how to easly set different maxValues for different pairs. — Marcin, Apr 21 '15 at 13:18

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

1 Answers1