order page我创建了一个IMS。在那个订单页面上，我必须验证不应允许输入的产品数量超过可用数量。下面是我的代码（qty []是库存中的可用数量，aqty []是创建订单时输入的数量）
<tr id="row_1">
<td>
<select class="form-control select_group product" data-row-id="row_1" id="product_1" name="product[]" style="width:100%;" onchange="getProductData(1)" required>
<option value=""></option>
<?php foreach ($products as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"><?php echo $v['name'] ?></option>
<?php endforeach ?>
</select>
</td>
<td>
<input type="text" name="hsn[]" id="hsn_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="hsn_value[]" id="hsn_value_1" class="form-control" autocomplete="off">
</td>
<td><input type="text" name="rate[]" id="rate_1" class="form-control" required onkeyup="getTotal(1)"></td>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" id="aqty_1" class="form-control" required onkeyup="getTotal(1)"></td>
<td>
<input type="text" name="unit[]" id="unit_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="unit_value[]" id="unit_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="amount_value[]" id="amount_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="gst[]" id="gst_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="gst_value[]" id="gst_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="gst_amount[]" id="gst_amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="gst_amount_value[]" id="gst_amount_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="last_amount[]" id="last_amount_1" class="form-control" disabled autocomplete="off">
<input type="hidden" name="last_amount_value[]" id="last_amount_value_1" class="form-control" autocomplete="off">
</td>
<td><button type="button" class="btn btn-default" onclick="removeRow('1')"><i class="fa fa-close"></i></button></td>
</tr>
这就是我比较两个字段值的方法
$('#qty_value_1,#aqty_1').on('keyup', function() {
var btn = $('button:contains("Submit")');
if (parseFloat($('#qty_value_1').val()) >= parseFloat($('#aqty_1').val())) {
btn.prop('disabled', false);
} else {
btn.prop('disabled', true);
}
})
以上验证仅适用于第一个产品，如果我输入第二个产品或更多此逻辑不起作用
答案 0 :(得分：0)
我用你的代码玩了一点......
class es代替id来简化，+运算符代替parseFloat，tr。 ...并以该工作片段结束：
（我已删除了hidden以便能够使用这些值）
// Changed ids to classes
$('.qty, .aqty').on('keyup', function() {
var btn = $('button:contains("Submit")');
// Get tr elements
var trs = $(this).closest('table').find('tbody tr');
$(trs).each(function(i, elm) {
var qty = $(elm).find('.qty');
var aqty = $(elm).find('.aqty');
btn.prop('disabled', false); // Enabled by default
if (+$(qty).val() < +$(aqty).val()) { // Using Unary +
btn.prop('disabled', true); // Disabled if qty < aqty
return; // Exit
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>qty</th>
<th>aqty</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off">
<input name="qty_value[]" class="qty form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" class="aqty form-control" required></td>
</tr>
<tr>
<td>
<input type="text" name="qty[]" id="qty_2" class="form-control" disabled autocomplete="off">
<input name="qty_value[]" class="qty form-control" autocomplete="off">
</td>
<td><input type="text" name="aqty[]" class="aqty form-control" required></td>
</tr>
</table>
<button disabled>Submit</button>
随意评论我。
希望它有所帮助！
答案 1 :(得分：0)
以下代码捕获aqty输入的更改事件。当值更改时，它会遍历所有行并检查是否有任何值大于该行的可用数量。如果是，则按钮被禁用。
我已使用attribute equals selector选择输入。您还可以使用类名来简化选择。例如qty可以有qty个班，aqty可以是aqty。然后，您可以通过".qty"和".aqty"
function updateSubmitStatus() {
var submitDisabled = false;
// iterate through inputs
$("[name='aqty[]']").each(function(a) {
var available = parseFloat($(this).closest("tr").find("[name='qty[]']").val()); // find available quantity for the row
var ordered = parseFloat($(this).val());
if (isNaN(ordered)) {
ordered = 0; // invalid number. reset to zero.
$(this).val(ordered)
}
if (available < ordered) {
submitDisabled = true;
return false; // submit disabled. break out of loop.
}
});
$("button:contains('Submit')").prop('disabled', submitDisabled);
}
$("[name='aqty[]']").change(updateSubmitStatus);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off" value="5">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="aqty[]" id="aqty_1" class="form-control" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="qty[]" id="qty_1" class="form-control" disabled autocomplete="off" value="10">
<input type="hidden" name="qty_value[]" id="qty_value_1" class="form-control" autocomplete="off">
</td>
<td>
<input type="text" name="aqty[]" id="aqty_1" class="form-control" required>
</td>
</tr>
</table>
<button>Submit</button>