Question

好的，我有一个jQuery限制了一次可以选择的复选框数量。我的问题是：我有10个值为1的复选框。我还有5个复选框，其值为2.在Opecart中，产品具有特定的值，因此我不能在不破坏系统的情况下覆盖此值。

这两组复选框分配了自己的限制：值1个框的限制为5.值2个框的限制为2.

他们加起来的总和是5.有没有办法将这些限制配对？

我之后的例子：用户检查3个值1复选框，当前值为3.他们现在可以选择2个值1个复选框或1个值2复选框以满足5的总和。

逻辑：

5值1 = 5
3值1 + 1值2 = 5
1值1 + 2值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">

你可以看到我不能只是替换这个值，因为它的目的是将产品从页面拉到购物车。我需要找到一种方法来应用我所陈述的逻辑，而不会影响系统。

Answer 1

每次用户更改复选框时，您都需要使用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

Jquery复选框限制，其值等于5的总和

1 个答案: