JQuery动态添加复选框：添加失效、校验规则及重复问题求助

Hey there, let's fix these issues one by one. I'll walk you through each problem and the corresponding code changes:

1. Fix the unresponsive "Add Section" button in main categories #

The core problem here is missing event delegation for dynamically added elements. Since new "Add Section" buttons are created after the page loads, direct event binding won't detect clicks on them. We'll attach the click event to a persistent parent container, then target the specific button within the clicked main category.

2. Prevent duplicate checkbox rows from being added to other main categories #

This happens because the original selector was targeting all section containers across every main category. We'll use $(this).closest('.main-category') to restrict the action to only the parent category where the button was clicked.

3. Implement the checkbox dependency validation rule #

We need to listen for checkbox changes and enforce these rules per main category:

• The first row's checkboxes are fully independent (no restrictions)
• Starting from the second row: the first checkbox of row N can only be checked if the first checkbox of row N-1 is checked. If the previous row's checkbox is unchecked, the current row's first checkbox gets disabled and automatically unchecked.

Modified Full Code #

HTML

<div id="categories-container">
  <!-- Initial main category -->
  <div class="main-category">
    <div class="section-row">
      <input type="checkbox" class="cb-item"> Item 1
      <input type="checkbox" class="cb-item"> Item 2
      <input type="checkbox" class="cb-item"> Item 3
    </div>
    <button class="add-section-btn">Add Section</button>
  </div>
</div>
<button id="add-main-category-btn">Add New Main Category</button>

CSS

.main-category {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ccc;
}
.section-row {
  margin: 10px 0;
}
.add-section-btn {
  margin-top: 10px;
}

JavaScript

$(document).ready(function() {
  // Add new main category
  $('#add-main-category-btn').click(function() {
    const newCategory = `
      <div class="main-category">
        <div class="section-row">
          <input type="checkbox" class="cb-item"> Item 1
          <input type="checkbox" class="cb-item"> Item 2
          <input type="checkbox" class="cb-item"> Item 3
        </div>
        <button class="add-section-btn">Add Section</button>
      </div>
    `;
    $('#categories-container').append(newCategory);
  });

  // Add section to current main category (event delegation)
  $('#categories-container').on('click', '.add-section-btn', function() {
    const $currentCategory = $(this).closest('.main-category');
    const newSection = `
      <div class="section-row">
        <input type="checkbox" class="cb-item"> Item 1
        <input type="checkbox" class="cb-item"> Item 2
        <input type="checkbox" class="cb-item"> Item 3
      </div>
    `;
    // Insert new row right before the Add Section button
    $currentCategory.find('.add-section-btn').before(newSection);
    // Update validation state immediately after adding a new row
    updateCheckboxValidation($currentCategory);
  });

  // Handle checkbox change to enforce validation rules
  $('#categories-container').on('change', '.cb-item', function() {
    const $currentCategory = $(this).closest('.main-category');
    updateCheckboxValidation($currentCategory);
  });

  // Helper function to update checkbox enable/disable state
  function updateCheckboxValidation($category) {
    const $rows = $category.find('.section-row');
    // Skip the first row (it's independent)
    for (let i = 1; i < $rows.length; i++) {
      const $prevRowFirstCb = $($rows[i-1]).find('.cb-item:first');
      const $currentRowFirstCb = $($rows[i]).find('.cb-item:first');
      
      // Disable current row's first checkbox if previous row's first is unchecked
      if (!$prevRowFirstCb.is(':checked')) {
        $currentRowFirstCb.prop('disabled', true);
        // Uncheck it if it was already checked
        if ($currentRowFirstCb.is(':checked')) {
          $currentRowFirstCb.prop('checked', false);
        }
      } else {
        $currentRowFirstCb.prop('disabled', false);
      }
    }
  }
});

Key Changes Explained #

• Event Delegation: Using $('#categories-container').on('click', '.add-section-btn', ...) ensures clicks on dynamically created buttons are detected, since the parent container exists on page load.
• Scope Restriction: $(this).closest('.main-category') locks all actions to the specific category where the button was clicked, eliminating cross-category duplicate rows.
• Validation Logic: The updateCheckboxValidation function runs on both checkbox changes and new row additions. It iterates through rows (starting from the second) to enforce the dependency rule, keeping the first row fully independent as required.

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