Jquery Checkbox 限制，其值等于 5 的总和

Question

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

这两组复选框有各自的限制：值 1 框的限制为 5。值 2 框的限制为 2。

它们的总和是 5。有没有办法将这些限制配对？

我所追求的一个例子： 用户勾选了 3 个 Value 1 Checkboxes，当前值为 3。他们现在可以再选择 2 个 value 1 checkboxes 或 1 value 2 checkboxes 来满足 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

每次用户更改复选框时，您需要使用each()检查checked的summation值

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