如何摆脱 jquery 函数中的重复代码，该函数在选中两个复选框时会禁用一组复选框？

Question

我有 2 组复选框，当在每组中选中 2 个复选框时，其余复选框将被禁用。我的 Jquery 有效，但有很多重复代码。如何将两者结合起来并使其更具可读性？有没有办法创建一个函数并在单击时将两组复选框作为参数传入？提前致谢。

PS - 我正在使用 Bootstrap 设置样式，所选复选框的值将传递给 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>

Answer 1

我将只对所有复选框使用一个 class，并在 data attribute 中包含“设置”信息。

因此，您可以为任意多的“集合”设置一个事件处理程序。

注意 disable 变量，它包含一个布尔值 true/false 并用作 .prop() 和 .toggleClass() 的参数。

我还修复了您的重置按钮...是类型提交，并没有删除禁用的 classes。 ;)

let checkboxes = $(".chkboxes");

checkboxes.on("click", function(evt) {

  // Get the data-chk_set value
  let chk_set = $(this).data("chk_set");
  
  // Get the checkboxes of this set
  let this_set = checkboxes.filter((i, chk) => $(chk).data("chk_set") == chk_set);

  // Get all checked
  let checked = this_set.filter((i, chk) => $(chk).is(":checked"));

  // Get all unchecked
  let unchecked = this_set.filter((i, chk) => !$(chk).is(":checked"));
  
  // Boolean
  let disable = checked.length >= 2;

  // in one line, enable/disable and add/remove class
  unchecked.prop("disabled", disable).parent().toggleClass("disabled", disable);

});

$("form").on("reset", function(){
  $("label.disabled, [type='checkbox']").removeClass("disabled").prop("disabled", false);
});

<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[]" data-chk_set=1 class="chkboxes" data-toggle="button">1
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="2" name="chkboxes-set1[]" data-chk_set=1 class="chkboxes" data-toggle="button">2
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="3" name="chkboxes-set1[]" data-chk_set=1 class="chkboxes" data-toggle="button">3
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="4" name="chkboxes-set1[]" data-chk_set=1 class="chkboxes" 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[]" data-chk_set=2 class="chkboxes" data-toggle="button">5
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="6" name="chkboxes-set2[]" data-chk_set=2 class="chkboxes" data-toggle="button">6
  </label>
      <label class="btn btn-outline-info">
    <input type="checkbox" value="7" name="chkboxes-set2[]" data-chk_set=2 class="chkboxes" data-toggle="button">7
  </label>
      <label class="btn btn-outline-info">
     <input type="checkbox" value="8" name="chkboxes-set2[]" data-chk_set=2 class="chkboxes" data-toggle="button">8
  </label>
    </div>
  </div>
  <div class="form-group row mb-1 mt-3">
    <div class="col-4 text-right">
      <button type="reset" 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>

如何摆脱 jquery 函数中的重复代码，该函数在选中两个复选框时会禁用一组复选框？

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

checkbox

jquery

duplicates