javascript - 如果已经在 jquery 中的第一行中选中，则防止在第二行中选中复选框

Question

我有一系列连续显示的 5 个复选框。然后，在第二行，我有相同数量的 5 个复选框。然后在第三行，我有相同数量的 5 个复选框。

我想要实现的是，如果我选中了第一行的前三个复选框，那么我就不能选中第二行的前三个复选框。我应该只能选中第二行中的最后两个复选框。我如何根据 jquery 中的后续复选框行实现此验证？

第一行的五个复选框如下:

 <div class="cars-item js-cars-item">
    <ul>
        <li>
            <input type="checkbox" id="car-1-3" disabled>
            <label for="car-1-3"><i class="icon-tick"></i></label>
        </li>
        <li>
            <input type="checkbox" id="car-2-3">
            <label for="car-2-3"><i class="icon-tick" disabled></i></label>
        </li>
        <li>
            <input type="checkbox" id="car-3-3">
            <label for="car-3-3"><i class="icon-tick"></i></label>
        </li>
        <li>
            <input type="checkbox" id="car-4-3">
            <label for="car-4-3"><i class="icon-tick"></i></label>
        </li>
        <li>
            <input type="checkbox" id="car-5-3">
            <label for="car-5-3"><i class="icon-tick"></i></label>
        </li>
    </ul>   
</div>

第二行的五个复选框:

<div class="cars-item js-cars-item">
        <ul>
            <li>
                <input type="checkbox" id="car-1-4" disabled>
                <label for="car-1-4"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-2-4">
                <label for="car-2-4"><i class="icon-tick" disabled></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-3-4">
                <label for="car-3-4"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-4-4">
                <label for="car-4-4"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-5-4">
                <label for="car-5-4"><i class="icon-tick"></i></label>
            </li>
        </ul>   
    </div>

第三行的五个复选框:

<div class="cars-item js-cars-item">
        <ul>
            <li>
                <input type="checkbox" id="car-1-5" disabled>
                <label for="car-1-5"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-2-5">
                <label for="car-2-5"><i class="icon-tick" disabled></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-3-5">
                <label for="car-3-5"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-4-5">
                <label for="car-4-5"><i class="icon-tick"></i></label>
            </li>
            <li>
                <input type="checkbox" id="car-5-5">
                <label for="car-5-5"><i class="icon-tick"></i></label>
            </li>
        </ul>   
    </div>

Answer 1

如果您不想在选择一个复选框时禁用复选框，这里有一个方法:
(这种工作方式类似于单选按钮，但使用的是 id，而不是 name)

$(".cars-item input:checkbox").on('click', function() {
  var box = $(this); // Checkbox just clicked
  if (box.is(":checked")) { // If the checkbox was just checked
    var box_id = $(this).attr('id'); // Get its id
    var boxes_ids = box_id.substr(0, (box_id.length - 1)); // Remove last number to make a generic id

    // Find checkboxes corresponding to generic id and uncheck them (except the one we checked)
    $(".cars-item input:checkbox[id^='" + boxes_ids + "']").not(box).prop("checked", false)
  }

  // Here are the values of the selected checkboxes.
  // I don't know which form you want, I've used an array
  var checkeds = [];
  $(".cars-item input:checkbox:checked").each(function(index) {
    checkeds[index] = $(this).attr('id');
  });
  console.clear();
  console.log("These are checked:", checkeds);
});

.cars-item {
  border-bottom: 1px solid gray;
}

ul {
  /* Added to fully show console in snippet */
  margin: 2px;
}

li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-3">
      <label for="car-1-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-3">
      <label for="car-2-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-3">
      <label for="car-3-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-3">
      <label for="car-4-3"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-3">
      <label for="car-5-3"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-4">
      <label for="car-1-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-4">
      <label for="car-2-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-4">
      <label for="car-3-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-4">
      <label for="car-4-4"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-4">
      <label for="car-5-4"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>
<div class="cars-item js-cars-item">
  <ul>
    <li>
      <input type="checkbox" id="car-1-5">
      <label for="car-1-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-2-5">
      <label for="car-2-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-3-5">
      <label for="car-3-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-4-5">
      <label for="car-4-5"><i class="icon-tick"></i></label>
    </li>
    <li>
      <input type="checkbox" id="car-5-5">
      <label for="car-5-5"><i class="icon-tick"></i></label>
    </li>
  </ul>
</div>

希望对您有所帮助。