限制WooCommerce产品附加项链接div单选 选中一个后禁用另一字段

实现代码 #

你可以直接使用以下基于jQuery的代码实现需求，WooCommerce环境默认已加载jQuery，无需额外引入依赖：

jQuery(function($) {
    // 定位两个附加项容器
    const $productAddon1 = $('.wc-pao-addon-PRODUTO');
    const $productAddon2 = $('.wc-pao-addon-PRODUTO\\ 2'); // 类名包含空格需要转义
    
    // 统一处理选中逻辑
    function handleAddonSelect(activeAddon, inactiveAddon) {
        const activeSelect = activeAddon.find('select.wc-pao-addon-field');
        const inactiveSelect = inactiveAddon.find('select.wc-pao-addon-field');
        
        // 若当前选中项有值，禁用另一个
        if(activeSelect.val() !== '') {
            inactiveSelect.val('').trigger('change'); // 清空另一项值，触发原有事件保证价格计算正常
            inactiveAddon.addClass('pao-addon-disabled').css('pointer-events', 'none').css('opacity', '0.6');
        } else {
            // 若当前选中项清空，恢复另一项可选
            inactiveAddon.removeClass('pao-addon-disabled').css('pointer-events', 'auto').css('opacity', '1');
        }
    }
    
    // 监听两个附加项的色板点击和下拉选择事件
    $productAddon1.on('click', '.wc-pao-addon-image-swatch', function() {
        setTimeout(() => handleAddonSelect($productAddon1, $productAddon2), 50); // 延时等待原有插件赋值完成
    }).on('change', 'select.wc-pao-addon-field', function() {
        handleAddonSelect($productAddon1, $productAddon2);
    });
    
    $productAddon2.on('click', '.wc-pao-addon-image-swatch', function() {
        setTimeout(() => handleAddonSelect($productAddon2, $productAddon1), 50);
    }).on('change', 'select.wc-pao-addon-field', function() {
        handleAddonSelect($productAddon2, $productAddon1);
    });
});

可选优化样式 #

你可以将以下样式加入主题自定义CSS中，优化禁用状态的视觉表现：

.pao-addon-disabled {
    cursor: not-allowed;
}

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