jQuery动态启用/禁用下拉选项功能异常求助

我看了你这个库存控制的下拉框需求，原代码的核心问题出在错误修改了固定库存变量maxStock，而且在更新其他下拉框时没有恢复之前被禁用的选项，导致修改第二个下拉框时会错误影响第一个的状态。下面是修正后的完整实现，完全符合你的需求：

完整代码 #

HTML部分 #

<select id="select1" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select2" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select3" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select4" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<p>Max Stock: <span id="disponibles">8</span></p>

jQuery部分 #

$(document).ready(function () {
  const maxStock = 8; // 固定总库存，不再修改它
  let $stockSelects = $(".stock");

  // 初始化和更新下拉框状态的通用函数
  function updateStockOptions() {
    // 计算所有已选值的总和
    let selectedTotal = $stockSelects.toArray().reduce((sum, select) => {
      return sum + parseInt(select.value, 10);
    }, 0);
    let remainingStock = maxStock - selectedTotal;

    // 更新剩余库存显示
    $("#disponibles").text(remainingStock);

    // 遍历每个下拉框
    $stockSelects.each(function () {
      let currentSelectValue = parseInt($(this).val(), 10);
      // 先恢复当前下拉框的所有选项为可用
      $(this).find("option").prop("disabled", false);

      // 禁用当前下拉框中超过剩余库存+自身已选值的选项（因为自身已选的部分可以保留）
      $(this).find("option").filter(function () {
        let optionValue = parseInt($(this).val(), 10);
        return optionValue > remainingStock + currentSelectValue;
      }).prop("disabled", true);
    });
  }

  // 初始加载时执行一次
  updateStockOptions();

  // 监听所有下拉框的change事件
  $stockSelects.on("change", updateStockOptions);
});

关键改进点 #

• 固定总库存变量：maxStock作为固定的总库存不再被修改，剩余库存通过总库存 - 已选总和计算，避免逻辑混乱
• 统一状态更新逻辑：把初始化和change事件的处理合并到同一个函数updateStockOptions，避免重复代码
• 先恢复再禁用：每次更新时先恢复当前下拉框的所有选项为可用，再根据剩余库存禁用超出的选项，确保之前的禁用状态不会残留
• 保留自身已选值：计算当前下拉框可选项时，允许保留自身已选的数值（比如当前选了3，剩余库存是5，那么当前下拉框最多可以选3+5=8），避免用户已选的数值被错误禁用

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