如何根据前序radio单选框选中状态禁用对应单选按钮选项

核心逻辑 #

我们将禁用规则存为可维护的配置对象，每次选中颜色后动态更新宝石选项的禁用状态：

• 提前配置每个材质对应要禁用的宝石value集合
• 材质切换时先重置所有宝石为可用状态，再按规则禁用对应选项
• 自动取消已选中的禁用宝石的选中状态，避免产生无效组合
• 保留原有SKU匹配逻辑不变

完整代码修改 #

你可以直接替换原有的JS代码：

// 配置规则：key为材质value，value为对应禁用的宝石value数组
const disableRule = {
  'gold': ['red', 'blue'],
  'rose gold': ['blue', 'tiger-eye', 'sunglow', 'malachite'],
  'silver': ['red', 'black', 'tiger-eye', 'sunglow', 'malachite']
}

$("input[name^='product_']").on('change', (e) => {
  const $stoneInputs = $("input[name='product_stone']");
  const productColor = $("input[name='product_color']:checked").val();
  let productStone = $("input[name='product_stone']:checked").val();

  // 颜色变更时更新宝石禁用状态
  if (productColor) {
    // 先重置所有宝石为可用
    $stoneInputs.prop('disabled', false).parent().removeClass('disabled');
    // 按规则禁用对应宝石
    const disableStones = disableRule[productColor];
    disableStones.forEach(stoneVal => {
      $stoneInputs.filter(`[value="${stoneVal}"]`).prop('disabled', true).parent().addClass('disabled');
    })
    // 如果当前选中的宝石被禁用，清空选中
    if (disableStones.includes(productStone)) {
      $stoneInputs.prop('checked', false);
      productStone = undefined;
    }
  }

  // 原有组合匹配逻辑
  $("input[name='combination']").prop('checked', false);
  if (productColor !== undefined && productStone !== undefined) {
    const $target = $(`input[data-color='${productColor}'][data-stone='${productStone}']`);
    if ($target.length) {
      $target.trigger('click');
    } else {
      alert("varient not found");
    }
  }
});

可选体验优化 #

可以增加以下CSS样式，让禁用的宝石选项视觉上更明显：

.stone_label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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