I have checkbox and I want user to select only two checkbox from each main div. If 2 checkbox are already selected and user tries to select 3rd then first one should be unselected so that we will have only 2 checkbox selected. In below code I have two div from each div user should only select two checkbox maximum

<div
      
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div >
        <div >
            <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main1</label
                  >
                </span>
              </div>
              <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main2</label
                  >
                </span>
              </div>
              <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main3</label
                  >
                </span>
              </div>
        </div>
    </div>


</div>

<div
      
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div >
        <div >
            <div >
                <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main1</label
                      >
                    </span>
                  </div>
                  <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main2</label
                      >
                    </span>
                  </div>
                  <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main3</label
                      >
                    </span>
                  </div>
            </div>
        </div>
    </div>

</div>

js: tried something like this

 $('.matrix').each(function() {
            $('.matrix-group').each(function() {
               
                var count = 0;
                if($('.custom-check-box').is(':checked')) {  }

            });
        });

CodePudding user response：

$("input[type=checkbox]").on("change", function(e){
  if($(e.target).parents(".matrix").find("input[type=checkbox]:checked").length > 2){
    if($(e.target).parents(".matrix").find("input[type=checkbox]:checked").first().is(e.target)){
      $(e.target).parents(".matrix").find("input[type=checkbox]:checked").last().prop("checked", false);
    }
    else {
      $(e.target).parents(".matrix").find("input[type=checkbox]:checked").first().prop("checked", false);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div
      
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div >
        <div >
            <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main1</label
                  >
                </span>
              </div>
              <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main2</label
                  >
                </span>
              </div>
              <div >
                <span
                  
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label  for="matrix_field_16605982_0_29936836">Main3</label
                  >
                </span>
              </div>
        </div>
    </div>


</div>

<div
      
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div >
        <div >
            <div >
                <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main1</label
                      >
                    </span>
                  </div>
                  <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main2</label
                      >
                    </span>
                  </div>
                  <div >
                    <span
                      
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label  for="matrix_field_16605982_0_29936836">Main3</label
                      >
                    </span>
                  </div>
            </div>
        </div>
    </div>

</div>