自定义checkbox多选，且限制选中个数

需求描述：

最近在做项目是遇到自定义多选，而且还要对选中个数做限制,如下图

360截图162807228299114.png

页面元素

 <div class="multi-list hasTip bb pb-10">
               <div class="tit c6">业务属性：</div>
               <div class="mulit-item" id="business">
                  <label class="checkBtn checkBtn-default mr-10" >
                      <input class="checkbox" type="checkbox" value="信用贷款">信用贷款
                  </label>
                  <label class="checkBtn checkBtn-default mr-10">
                      <input class="checkbox" type="checkbox" value="抵押贷款">抵押贷款
                  </label> 
                  <label class="checkBtn checkBtn-default mr-10">
                      <input class="checkbox" type="checkbox" value="民间借贷">民间借贷
                  </label>
                  ..................
            </div>

点击事件

$(".multi-list").on("click",".checkbox",function(){
      var insLength = $("#institution .selected").length;
      var busLength = $("#business .selected").length;
      var isParent = $(this).parent().parent().attr("id");

      if(!$(this).parent().hasClass('selected')){
        if(insLength >= 2 && isParent == "institution"){
           warning_alert("机构属性最多能选2项");
           $(this).prop("checked", false)；//当超过限制时，将checkbox设置为不可选中
           return;
        }else if(busLength >=3 && isParent == "business"){
           warning_alert("业务属性最多能选3项");
           $(this).prop("checked", false);
           return;
        }else{
          $(this).parent().addClass("selected");
        }
      }else{
        $(this).parent().removeClass("selected");
      }
    })

注意：用 $(this).prop("checked", false)；来设置checkbox不可选中

1.为什么不用disabled?

因为设置成disabled，绑定其身上的点击事件也失效了，就没办法弹出提示信息了

2.为什么不用$(this).attr("checked", false)；

jQuery版本问题。我操作属性用的是 $(“**”).attr(“attrName”);而jquery的版本用的是1.9，这就是存在一个兼容性和稳定性问题。 jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即

$("input[type='checkbox']").prop("checked"); 
$("input[type='checkbox']").prop("disabled", false); 
$("input[type='checkbox']").prop("checked", true);

额外补充

判断checkbox是否选中

//选中
$("input[type='checkbox']").is(":checked")；
$("input[type='checkbox']").prop("checked")；
$("input[type='checkbox']").get(0).checked；

//未选中
$("input[type='checkbox']").not(":checked")；

2.给checkbox添加选中、取消、禁用事件

//选中
$("input[type='checkbox']").prop("checked", true);
//取消
$("input[type='checkbox']").prop("checked", false); 
//禁用
$("input[type='checkbox']").prop("disabled", "disabled");