我有一个表单，这里是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' />
答案 0 :(得分：0)
首先需要设置对子以便轻松互动。
有很多方法可以实现这种行为，这是一种快速简便的理解方式：
代码＆amp;演示：
$(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' />