限制最多选中6个盒子后无法取消选中的jQuery问题求助

Hey there! I see the problem with your current code—right now, once you've selected 6 boxes, you can't toggle any of them because your condition only allows the toggle when the active count is under 6. That means even clicking an already selected box won't work, since the condition fails. Let's fix that!

The Core Issue #

Your current logic checks if the number of active boxes is less than 6 before allowing any toggle. So when you hit 6 active boxes, all toggle actions (including deselecting existing ones) get blocked.

The Solution #

We need to adjust the logic to prioritize deselecting: if the user clicks an already selected box, let them deselect it regardless of the count. Only block adding new selections when we're already at 6.

Here's the updated code:

$('a').click(function() {
  // Check if the clicked item is already selected
  if ($(this).hasClass('active')) {
    // Allow deselecting no matter how many are active
    $(this).toggleClass('active');
  } else {
    // Only allow selecting if we haven't hit 6 yet
    if ($('.active').length < 6) {
      $(this).toggleClass('active');
    } else {
      alert('More than 6 selections not allowed');
    }
  }
});

How It Works #

1. First, we check if the clicked <a> already has the active class. If yes, we immediately toggle it off—no restrictions here.
2. If the item isn't selected yet, we then check if we have fewer than 6 active boxes. If we do, we allow toggling the class on.
3. If we're already at 6 active boxes and the user tries to select a new one, we show the alert.

Simplified Version #

You can also condense this logic into a shorter form using a combined condition, which does the same thing:

$('a').click(function() {
  const canToggle = $(this).hasClass('active') || $('.active').length < 6;
  
  if (canToggle) {
    $(this).toggleClass('active');
  } else {
    alert('More than 6 selections not allowed');
  }
});

This way, the toggle is allowed either when the item is already selected (to deselect) or when we haven't reached the 6-selection limit (to select a new one).

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