JQuery复选框验证问题：实现复选框互斥逻辑时遇阻

Hey there! Let’s work through your checkbox issue. The goal is clear: when the first checkbox is checked, all others should be unchecked and disabled, and when it’s unchecked, the others should become enabled again.

First, let’s go over the key issues in your current code:

• You’re using .attr() to set checked and disabled—for boolean properties like these, jQuery’s .prop() is the right tool because it updates the current state of the element, not just the initial HTML attribute.
• Your code doesn’t handle the reverse scenario: when the first checkbox is unchecked, the other checkboxes stay disabled, which isn’t what you want.
• You’re looping through all checkboxes, but we can simplify by targeting just the non-first checkboxes directly.

Here’s a corrected version of your code that should work as expected:

$(document).ready(function() {
  // Get references to the first checkbox and all others
  const firstCheckbox = $('#TestChecks > input[type="checkbox"]').first();
  const otherCheckboxes = $('#TestChecks > input[type="checkbox"]').not(firstCheckbox);

  // Listen for changes in the checkbox container
  $('#TestChecks').change(function() {
    const isFirstChecked = firstCheckbox.is(':checked');
    
    if (isFirstChecked) {
      // Uncheck and disable all other checkboxes
      otherCheckboxes.prop('checked', false).prop('disabled', true);
    } else {
      // Re-enable other checkboxes (preserve their previous checked state)
      otherCheckboxes.prop('disabled', false);
    }
  });
});

Let’s break down what this does: #

1. Element Selection: We grab the first checkbox and all others separately to keep the logic clean and efficient.
2. Change Listener: When any checkbox in the container is toggled, we check if the first one is checked.
3. First Checkbox Checked: Using .prop(), we uncheck all other boxes and disable them—this properly updates their live state, not just the initial HTML attribute.
4. First Checkbox Unchecked: We re-enable the other boxes so the user can interact with them again (their previous checked state is preserved unless you want to clear it too).

Why .prop() instead of .attr()? #

Attributes like checked in the HTML represent the element’s initial state. Once the user interacts with the checkbox, the checked property reflects the current state, while the attribute stays as the original value. Using .prop() ensures we’re modifying the live, user-facing state of the checkbox, which is critical for dynamic interactions like this.

Drop this code in place of your existing script, and you should see the checkboxes behave exactly as you intended.

内容的提问来源于stack exchange，提问作者Gómez