如何用jQuery实现：首行复选框勾选后禁止后续行对应位置复选框勾选

Got it, let's work through this checkbox dependency logic with jQuery. The goal is straightforward: when all 3 checkboxes in the first row are checked, lock the first 3 checkboxes in the second row and only allow the last 2 to be selected. Here's how to build this step by step:

Step 1: Clarify Element Selectors #

First, we need to target the right checkboxes clearly. Using jQuery's selector methods and slice(), we can easily grab the groups we need:

• First row's first 3 checkboxes: The first .js-cars-item container's inputs, take the first 3
• Second row's first 3 checkboxes: The second .js-cars-item container's inputs, take the first 3
• Second row's last 2 checkboxes: The second .js-cars-item container's inputs, take from index 3 onwards

Step 2: Build the Validation Function #

We'll create a reusable function that checks the state of the first row's checkboxes and updates the second row accordingly:

• Check if all 3 first-row checkboxes are checked
• If yes: Disable the second row's first 3 (and uncheck them if they were selected), ensure the last 2 are enabled
• If no: Re-enable the second row's first 3 checkboxes

Step 3: Hook Up Event Listeners #

We need to run the validation function two times:

1. On page load (to handle any pre-checked or disabled checkboxes in the initial HTML)
2. Whenever any of the first row's first 3 checkboxes are toggled

Full Working Code #

Your Existing HTML (unchanged)

<!-- First Row -->
<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>

<!-- Second Row -->
<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>

<!-- Third Row -->
<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>

jQuery Script

$(document).ready(function() {
  // Define our checkbox groups
  const $firstRowFirstThree = $('.js-cars-item:first input[type="checkbox"]').slice(0, 3);
  const $secondRowFirstThree = $('.js-cars-item:eq(1) input[type="checkbox"]').slice(0, 3);
  const $secondRowLastTwo = $('.js-cars-item:eq(1) input[type="checkbox"]').slice(3);

  // Function to update second row state based on first row
  function updateSecondRow() {
    // Check if all 3 first-row checkboxes are checked
    const isAllChecked = $firstRowFirstThree.filter(':checked').length === 3;

    if (isAllChecked) {
      // Disable and uncheck first 3 in second row
      $secondRowFirstThree.prop('disabled', true).prop('checked', false);
      // Ensure last 2 are enabled
      $secondRowLastTwo.prop('disabled', false);
    } else {
      // Re-enable first 3 in second row
      $secondRowFirstThree.prop('disabled', false);
      // Last 2 stay enabled (adjust if you need other rules here)
    }
  }

  // Run on page load to handle initial state
  updateSecondRow();

  // Listen for changes on first row's checkboxes
  $firstRowFirstThree.on('change', updateSecondRow);
});

Notes #

• Initial State Handling: The updateSecondRow() function runs on page load to account for any pre-disabled or pre-checked checkboxes in your original HTML (like the first checkbox in the first row being disabled).
• Flexibility: If you need to extend this logic to the third row later, you can reuse the same pattern—just define new selector variables and add additional checks in the function.
• User Experience: We automatically uncheck the second row's first 3 checkboxes when they're disabled to avoid confusion for users.

内容的提问来源于stack exchange，提问作者ExpertGenie