Q: To set limit over selection of Checbox I have 2 DIV containers, both contains Checkbox element in it. I want to apply a limit such that
from DIV2 maximum 7 checkbox can be selected and from DIV1 user can select all checbox. But the
total number of checked checbox both from DIV1 and DIV2 should not exceed more than 10.
Each time during check/uncheck when counter of checkboxes that are checked is 10 then remaining
unchecked checkbox will get disabled.
<div id="main DIV">
    <div id="DIV1">
        <input type="checkbox" checked/>1 
        <input type="checkbox" checked/>2 
        <input type="checkbox" checked/>3<br/>
        <input type="checkbox" checked/>4 
        <input type="checkbox" checked/>5 
    </div>

    <div id="DIV2">
        <input type="checkbox" checked/>1 
        <input type="checkbox" checked/>2 
        <input type="checkbox" checked/>3<br/>
        <input type="checkbox" checked/>4 
        <input type="checkbox" checked/>5 
        <input type="checkbox" checked/>6
        <input type="checkbox" checked/>7
        <input type="checkbox" checked/>8
        <input type="checkbox" checked/>9
    </div>
</div>


A: 

var div2Cbs = $("#DIV2 :checkbox");

var allCbs = div2Cbs.add("#DIV1 :checkbox").on("click", function() {
  var disable2 = div2Cbs.filter(":checked").length >= 7;
  var disableAll = allCbs.filter(":checked").length >= 10;
  allCbs.filter(":not(:checked)").prop("disabled", disableAll);
  div2Cbs.filter(":not(:checked)").prop("disabled", disable2 || disableAll);
});
  
div { border: thin black solid; margin: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="DIV1">
<input type="checkbox"/>1 
  <input type="checkbox"/>2 
  <input type="checkbox"/>3<br/>
  <input type="checkbox"/>4 
  <input type="checkbox"/>5 
</div>

<div id="DIV2">
<input type="checkbox"/>1 
  <input type="checkbox"/>2 
  <input type="checkbox"/>3<br/>
  <input type="checkbox"/>4 
  <input type="checkbox"/>5 
 <input type="checkbox"/>6
 <input type="checkbox"/>7
 <input type="checkbox"/>8
 <input type="checkbox"/>9
</div>



A: Just try 
//Give you the length of the checked chechbox under `mainDIV`
$('#mainDIV input[type="checkbox"]:checked').length

Please make sure that, ID should not have space. mainDIV instead of main DIV.


*

*Use parent child selection in Jquery to provide limit.

*:checked and :not(:checked) will help you to achieve this.


Hope this hint is enough to understand.
