电商店铺产品变体选择异常：仅能选一种面料，其余禁用求助

1. 解除面料选项的禁用限制 #

先定位并移除导致选项禁用的代码：

• 检查是否有JS代码给选项添加了disabled属性，找到类似element.disabled = true的语句，改为element.disabled = false；
• 检查CSS是否设置了pointer-events: none或opacity: 0.5这类禁用样式，移除对应规则。

2. 绑定面料选择事件实现产品切换 #

根据你的DOM结构，给面料选项绑定切换事件，示例逻辑如下（可根据实际结构调整）：

// 假设面料选项统一有.fabric-option类，每个选项带data-fabric标识面料类型
// 关联产品统一有.product-item类，带data-fabric标识对应面料
document.querySelectorAll('.fabric-option').forEach(option => {
  option.addEventListener('click', function() {
    // 可选：高亮当前选中的面料选项
    document.querySelectorAll('.fabric-option').forEach(opt => opt.classList.remove('active'));
    this.classList.add('active');

    // 获取选中的面料类型
    const targetFabric = this.dataset.fabric;

    // 切换对应产品的显示状态
    document.querySelectorAll('.product-item').forEach(item => {
      item.style.display = item.dataset.fabric === targetFabric ? 'block' : 'none';
    });
  });
});

3. 初始化默认显示状态 #

页面加载完成后，自动选中第一个面料选项并展示对应产品：

window.addEventListener('DOMContentLoaded', () => {
  const firstOption = document.querySelector('.fabric-option:first-child');
  firstOption?.click();
});

4. 排查调试要点 #

• 触发选项点击后，打开浏览器控制台（F12），查看是否有报错信息；
• 在事件回调中添加console.log(targetFabric)，确认是否正确获取到选中的面料值；
• 检查产品元素的data-fabric属性值是否与面料选项的完全匹配（注意大小写、空格等细节）。

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