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

时间:2016-10-24 12:51:13

标签: javascript jquery html checkbox opencart

好的,我有一个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">

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

1 个答案:

答案 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