jQuery复选框选中限制异常：Egg Roll选中时酱汁复选框无法选2个

你的代码核心问题在于统计选中复选框数量时，错误计算了**所有复选框（包括配菜）**的选中数，而非仅统计酱汁复选框的数量。当选中Egg Roll后，总选中数会包含这个配菜复选框，导致即使num变为2，判断逻辑也会因为总数量超标而取消新选中的酱汁。

JavaScript #

let selectedSauces = [];
let maxSauces = 1;

// 监听Egg Roll复选框变化，调整酱汁最大可选数
$('#side2').change(function() {
  maxSauces = this.checked ? 2 : 1;
  // 如果当前选中的酱汁超过新限制，移除多余项
  if (selectedSauces.length > maxSauces) {
    const excess = selectedSauces.splice(maxSauces);
    excess.forEach(sauce => $(sauce).prop('checked', false));
  }
});

// 监听酱汁复选框变化
$('.sauce').change(function() {
  if (this.checked) {
    selectedSauces.push(this);
    // 超过限制则取消最早选中的酱汁
    if (selectedSauces.length > maxSauces) {
      const removed = selectedSauces.shift();
      $(removed).prop('checked', false);
    }
  } else {
    // 取消选中时同步移除跟踪列表中的项
    const index = selectedSauces.indexOf(this);
    if (index !== -1) {
      selectedSauces.splice(index, 1);
    }
  }
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- // **** Sides Table **** -->
<div>
  <table>
    <caption>Choose Your Sides</caption>
    <tr>
      <td><input type="checkbox" value="Mac 'n Cheese" name="side1" id="side1" data-price="2.50" class="item"><label for="side1">Mac 'n Cheese</label></td>
      <td><input type="checkbox" value="Egg Roll" name="side2" id="side2" data-price="3.00" class="item"><label for="side2">Egg Roll</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Green Beans" name="side3" id="side3" data-price="2.50" class="item"><label for="side3">Green Beans</label></td>
      <td><input type="checkbox" value="Potato Salad" name="side4" id="side4" data-price="2.50" class="item"><label for="side4">Potato Salad</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Seven Bean Chili" name="side5" id="side5" data-price="2.50" class="item"><label for="side5">Seven Bean Chili</label></td>
      <td><input type="checkbox" value="Cole Slaw" name="side6" id="side6" data-price="1.50" class="item"><label for="side6">Cole Slaw</label></td>
    </tr>
  </table>
</div>
<!-- // **** Sauce Table **** -->
<div>
  <table>
    <caption>Choose Your Sauce</caption>
    <tr>
      <td><input type="checkbox" value="Cheerwine" name="sauce" id="checkbox1" class="sauce"><label for="checkbox1">Cheerwine</label></td>
      <td><input type="checkbox" value="Hummer" name="sauce" id="checkbox2" class="sauce"><label for="checkbox2">Hummer</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Moovelous" name="sauce" id="checkbox3" class="sauce"><label for="checkbox3">Moovelous</label></td>
      <td><input type="checkbox" value="Mercy Me" name="sauce" id="checkbox4" class="sauce"><label for="checkbox4">Mercy Me</label></td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Pepper Jacked" name="sauce" id="checkbox5" class="sauce"><label for="checkbox5">Pepper Jacked</label></td>
      <td><input type="checkbox" value="9mm" name="sauce" id="checkbox6" class="sauce"><label for="checkbox6">9mm</label></td>
    </tr>
  </table>
</div>

• 单独维护selectedSauces数组跟踪选中的酱汁，彻底避免和配菜复选框的统计混淆
• 当Egg Roll选中状态变化时，自动校验当前选中酱汁数量，超出新限制则自动取消多余项
• 取消酱汁选中时同步更新跟踪数组，保证逻辑一致性

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