Question

我正在尝试使用jQuery配置多个复选框，

我希望用户可以在2个不同的类别中最多选择8个复选框

目前用户可以选择8个复选框，但我不知道如何限制为2个类别。

$(document).ready(function () {
    $("input[name='tech']").change(function () {
        var maxAllowed = 8;
        var cnt = $("input[name='tech']:checked").length;
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select maximum ' + maxAllowed + ' technologies!!');
        }
    });
});

完整代码示例：https://jsfiddle.net/zy34p5cy/2

有什么想法吗？

Answer 1

有许多可能的解决方案。例如，使用类。像这样https://jsfiddle.net/zy34p5cy/16/

    var maxAllowed = 8;
    var cnt = $("input[name='tech']:checked").length;
    var cat1 = $("input.cat1[name='tech']:checked").length > 0 ? 1 : 0;
    var cat2 = $("input.cat2[name='tech']:checked").length > 0 ? 1 : 0;
    var cat3 = $("input.cat3[name='tech']:checked").length > 0 ? 1 : 0;
    var cats = cat1 + cat2 + cat3
    if (cnt > maxAllowed || cats > 2) ...

Answer 2

一种简单的方法如下：

<h3>Select multi checkbox inside 2 categories max:</h3>

<div class="col-xs-4">
  <h5>Category 1</h5>
  <input type="checkbox" name="tech1" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" name="tech1" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" name="tech1" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" name="tech1" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" name="tech1" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 2</h5>
  <input type="checkbox" name="tech2" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" name="tech2" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" name="tech2" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" name="tech2" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" name="tech2" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 3</h5>
  <input type="checkbox" name="tech3" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" name="tech3" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" name="tech3" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" name="tech3" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" name="tech3" value="Mootools" /> checkbox
  <br/>
</div>


$(document).ready(function () {
    var maxAllowedCheckboxes = 8;


    $("input[name='tech1']").change(function () {
      restrictCheckboxSeletions($(this));
    });
    $("input[name='tech2']").change(function () {
      restrictCheckboxSeletions($(this));
    });
    $("input[name='tech3']").change(function () {
      restrictCheckboxSeletions($(this));
    });

    function restrictCheckboxSeletions(checkbox) {
      var countTech1 = $("input[name='tech1']:checked").length;
        var countTech2 = $("input[name='tech2']:checked").length;
        var countTech3 = $("input[name='tech3']:checked").length;
        if (countTech1 > 0 && countTech2 > 0 && countTech3 > 0) {
          checkbox.prop("checked", "");
            alert('You can only select from 2 categories!');
        } else {
          var totalCount = countTech1 + countTech2 + countTech3;
            if (totalCount > maxAllowedCheckboxes) {
              checkbox.prop("checked", "");
              alert('You can select maximum ' + maxAllowedCheckboxes + ' categories!');
            }
        }
    }

});

Answer 3

我在你的html输入中包含了data-attribute。

docker-compose exec irc

并修改JS如下：

<h3>Select multi checkbox inside 2 categories max:</h3>

<div class="col-xs-4">
  <h5>Category 1</h5>
  <input type="checkbox" data-category="Category1" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category1" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category1" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category1" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category1" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 2</h5>
  <input type="checkbox" data-category="Category2" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category2" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category2" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category2" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category2" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 3</h5>
  <input type="checkbox" data-category="Category3" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category3" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category3" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category3" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" data-category="Category3" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

希望它有所帮助。

Answer 4

给每个组一个不同的属性，逻辑很容易理解

＆＃13;

$(document).ready(function () {
    $("input[name='tech']").change(function () {
        var maxAllowed = 8;
        var maxgr =2;
        var cnt = $("input[name='tech']:checked").length;
        var groups = [];
        $("input[name='tech']:checked").each(function () {
   groups.push( $(this).attr('group'));
   if ($.unique(groups).length>2){
   $(this).prop("checked", "");
    alert('You can select maximum ' + maxgr + ' groups!');
   
   }
});
        
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select maximum ' + maxAllowed + ' categories!');
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Select multi checkbox inside 2 categories max:</h3>

<div class="col-xs-4">
  <h5>Category 1</h5>
  <input type="checkbox" group="c" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 2</h5>
  <input type="checkbox" group="a" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 3</h5>
  <input type="checkbox" group="b" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="b"  name="tech" value="Mootools" /> checkbox
  <br/>
</div>

＆＃13;

选择多个类别中的多个复选框jQuery

4 个答案: