好的,我有一个jQuery限制了一次可以选择的复选框数量。我的问题是:我有10个值为1的复选框。我还有5个复选框,其值为2.在Opecart中,产品具有特定的值,因此我不能在不破坏系统的情况下覆盖此值。
这两组复选框分配了自己的限制:值1个框的限制为5.值2个框的限制为2.
他们加起来的总和是5.有没有办法将这些限制配对?
我之后的例子: 用户检查3个值1复选框,当前值为3.他们现在可以选择2个值1个复选框或1个值2复选框以满足5的总和。
逻辑:
这是用于限制复选框的Jquery
var limit = 5;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
这是产品页面的摘录,其中Opencart在复选框中定义了自己的默认值。
input class="limit" type="checkbox" name="option[547][]" value="1218" id="option-value-1218">
你可以看到我不能只是替换这个值,因为它的目的是将产品从页面拉到购物车。我需要找到一种方法来应用我所陈述的逻辑,而不会影响系统。
答案 0 :(得分:0)
每次用户更改复选框时,您都需要使用summation
检查checked
each()
个值
var limit = 5;
$('.limit').on('change', function(evt) {
var sum = 0;
$('.limit:checked').each(function(){
sum += parseInt($(this).val());
});
if(sum >= limit) {
this.checked = false;
}
});
仅供参考,如果您无法更改复选框的值,则可以使用.data()之类的data-value
来获取其他属性。
var limit = 5;
$('.limit').on('change', function(evt) {
var sum = 0;
$('.limit:checked').each(function(){
sum += parseInt($(this).val());
});
if(sum > limit) {
this.checked = false;
}
});
FYI, if you can't change the value of check-boxes you can use **[.data()]**[1] like `data-value` for additional attributes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="limit" type="checkbox" value="5"/>5
<input class="limit" type="checkbox" value="4"/>4
<input class="limit" type="checkbox" value="3"/>3
<input class="limit" type="checkbox" value="2"/>2
<input class="limit" type="checkbox" value="1"/>1