select only two checkbox at a time

user_17268105 0
Viewed 91

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 class="ps-field col-sm-6" from each div user should only select two checkbox maximum

<div
      class="ps-field col-sm-6"
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div class="matrix">
        <div class="matrix-group">
            <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main1</label
                  >
                </span>
              </div>
              <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main2</label
                  >
                </span>
              </div>
              <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main3</label
                  >
                </span>
              </div>
        </div>
    </div>


</div>

<div
      class="ps-field col-sm-6"
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div class="matrix">
        <div class="matrix-group">
            <div class="matrix-group">
                <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-label" for="matrix_field_16605982_0_29936836">Main1</label
                      >
                    </span>
                  </div>
                  <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-label" for="matrix_field_16605982_0_29936836">Main2</label
                      >
                    </span>
                  </div>
                  <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-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')) {  }

            });
        });
html jquery javascript
1 Answers

$("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
      class="ps-field col-sm-6"
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div class="matrix">
        <div class="matrix-group">
            <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main1</label
                  >
                </span>
              </div>
              <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main2</label
                  >
                </span>
              </div>
              <div class="radio-group">
                <span
                  class="radio custom-radio custom-radio-primary"
                  style="display: inline-block"
                  >
                  <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                    name="matrix_field_16605982_0"/>
                  <label class="radio-label" for="matrix_field_16605982_0_29936836">Main3</label
                  >
                </span>
              </div>
        </div>
    </div>


</div>

<div
      class="ps-field col-sm-6"
      data-column="1"
      data-fieldname="course entree maximum 2 choices"
      data-fieldlabel="course entree maximum 2 choices"
    >
    <div class="matrix">
        <div class="matrix-group">
            <div class="matrix-group">
                <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-label" for="matrix_field_16605982_0_29936836">Main1</label
                      >
                    </span>
                  </div>
                  <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-label" for="matrix_field_16605982_0_29936836">Main2</label
                      >
                    </span>
                  </div>
                  <div class="radio-group">
                    <span
                      class="radio custom-radio custom-radio-primary"
                      style="display: inline-block"
                      >
                      <input id="matrix_field_16605982_0_29936836" type="checkbox" value="Main"
                        name="matrix_field_16605982_0"/>
                      <label class="radio-label" for="matrix_field_16605982_0_29936836">Main3</label
                      >
                    </span>
                  </div>
            </div>
        </div>
    </div>

</div>

user_93254700
Related