如何用jQuery实现仅允许从单个表格向购物车添加商品的功能

我来帮你搞定这个需求！核心逻辑就是：当用户点击某张表格里的「添加到购物车」按钮后，立刻禁用其他所有表格里的添加按钮，确保用户只能从同一个表格选品。下面是具体的实现方案：

完整代码示例 #

HTML（补全多表格结构） #

<!-- 表格1：商品组A -->
<table class="tableResults" border="1">
  <tr>
    <td><button class="itemButton">Add to Cart</button></td>
    <td>item1</td>
    <td>Electronics</td>
  </tr>
  <tr>
    <td><button class="itemButton">Add to Cart</button></td>
    <td>item2</td>
    <td>Electronics</td>
  </tr>
</table>

<br>

<!-- 表格2：商品组B -->
<table class="tableResults" border="1">
  <tr>
    <td><button class="itemButton">Add to Cart</button></td>
    <td>item3</td>
    <td>Clothing</td>
  </tr>
  <tr>
    <td><button class="itemButton">Add to Cart</button></td>
    <td>item4</td>
    <td>Clothing</td>
  </tr>
</table>

<br>

<!-- 可选：重置选择按钮 -->
<button id="resetCartSelection">Reset Selection (Choose Another Table)</button>

JavaScript（原生JS实现） #

// 1. 获取所有添加按钮并绑定点击事件
const allAddButtons = document.querySelectorAll('.itemButton');
allAddButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 2. 找到当前按钮所属的表格
    const currentTable = this.closest('.tableResults');
    
    // 3. 遍历所有表格，禁用非当前表格的添加按钮
    document.querySelectorAll('.tableResults').forEach(table => {
      if (table !== currentTable) {
        table.querySelectorAll('.itemButton').forEach(btn => {
          btn.disabled = true;
          // 给禁用按钮加视觉提示
          btn.style.opacity = '0.5';
          btn.style.cursor = 'not-allowed';
        });
      }
    });
  });
});

// 可选：重置功能（恢复所有按钮可用）
document.getElementById('resetCartSelection')?.addEventListener('click', function() {
  document.querySelectorAll('.itemButton').forEach(btn => {
    btn.disabled = false;
    btn.style.opacity = '1';
    btn.style.cursor = 'pointer';
  });
});

功能说明 #

• 核心逻辑：点击按钮时，通过closest()精准定位当前按钮所在的表格，然后排除该表格，禁用其他所有表格内的添加按钮。
• 视觉反馈：给禁用的按钮设置半透明和禁止光标，让用户直观知道按钮不可用。
• 可选重置：如果需要允许用户切换表格选品，添加重置按钮一键恢复所有按钮功能。

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