lundi 4 janvier 2021

How to get rid of duplicate code in jquery function that disables a group of checkboxes when two are selected?

I have 2 sets of checkboxes and when 2 checkboxes are selected in each group, rest are disabled. My Jquery works, but there is a lot of duplicate code. How can I combine the two and make it more readable? Is there a way to create a function and have the two sets of checkboxes passed in as arguments when clicked upon? Thanks in advance.

PS - I'm using Bootstrap to style and Values of selected checkboxes will be passed on to PHP.

const CHECKBOXES_SET1 = $(".chkboxes-set1");
const CHECKBOXES_SET2 = $(".chkboxes-set2");

CHECKBOXES_SET1.on("click", function(evt) {
  let checkedCount = $(CHECKBOXES_SET1).filter(":checked").length;

  if (checkedCount >= 2) {
    $(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", true);
    $(CHECKBOXES_SET1).filter(":not(:checked)").parent().addClass("disabled");
  } else {
    $(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", false);
    $(CHECKBOXES_SET1).filter(":not(:checked)").parent().removeClass("disabled");
  }
});

CHECKBOXES_SET2.on("click", function(evt) {
  let checkedCount = $(CHECKBOXES_SET2).filter(":checked").length;

  if (checkedCount >= 2) {
    $(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", true);
    $(CHECKBOXES_SET2).filter(":not(:checked)").parent().addClass("disabled");
  } else {
    $(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", false);
    $(CHECKBOXES_SET2).filter(":not(:checked)").parent().removeClass("disabled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="test.php" method="post">
  <div class="form-group mb-2">
    <label for="first-btn-group">Pick two numbers</label>
    <div class="col" id="first-btn-group">
      <label class="btn btn-outline-info">
    <input type="checkbox" value="1" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">1
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="2" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">2
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="3" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">3
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="4" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">4
  </label>
    </div>
  </div>
  <div class="form-group mb-2">
    <label for="second-btn-group">Pick two numbers</label>
    <div class="col" id="second-btn-group">
      <label class="btn btn-outline-info">
    <input type="checkbox" value="5" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">5
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="6" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">6
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="7" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">7
  </label>
      <label class="btn btn-outline-info">
     <input type="checkbox" value="8" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">8
  </label>
    </div>
  </div>
  <div class="form-group row mb-1 mt-3">
    <div class="col-4 text-right">
      <button type="submit" class="btn btn-primary" name="nums-reset">Reset</button>
    </div>
    <div class="col-4">
      <button type="submit" class="btn btn-primary" name="nums-submit">Submit</button>
    </div>
  </div>
</form>



Aucun commentaire:

Enregistrer un commentaire