如何使用JS禁用按钮？电商网站Add to Cart按钮禁用方法

嘿，我来帮你搞定这个禁用「Add to Cart」按钮的需求！既然手动添加disabled属性已经能生效，那用JS实现起来其实很简单，结合你已经写好的jQuery自执行函数，我们可以按下面的步骤来：

第一步：确定按钮的正确选择器 #

首先你需要找到页面上「Add to Cart」按钮的专属选择器（比如类名、ID）：

• 打开浏览器开发者工具（按F12），点击「选择元素」工具，选中按钮
• 在Elements面板里查看按钮的属性，比如常见的电商主题里，按钮可能带有add_to_cart_button类名，或者自定义的类/ID

第二步：在你的jQuery函数中添加禁用代码 #

把下面的代码填入你已有的自执行函数中，记得替换成你实际找到的选择器：

(function ($) {
    // 等待页面DOM完全加载完成
    $(document).ready(function() {
        // 替换成你实际的按钮选择器，比如如果按钮类是add-to-cart就写$('.add-to-cart')
        const addToCartButtons = $('.add_to_cart_button');
        
        // 禁用按钮：用prop()方法更适合布尔类型的属性（比如disabled）
        addToCartButtons.prop('disabled', true);
        
        // 可选：添加样式让按钮看起来明显是禁用状态（变灰+禁止光标）
        addToCartButtons.css({
            opacity: '0.6',
            cursor: 'not-allowed'
        });
    });
})(window.jQuery);

第三步：处理动态加载的按钮（如果有） #

如果你的商品是通过AJAX动态加载的（比如滚动加载更多商品），上面的代码只能处理页面初始加载的按钮，这时候需要用DOM监听来处理新生成的按钮：

(function ($) {
    // 创建一个DOM变化监听器
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 检查是否有新节点被添加到页面
            if (mutation.addedNodes.length) {
                // 对新节点里的Add to Cart按钮执行禁用
                $(mutation.addedNodes).find('.add_to_cart_button').prop('disabled', true).css({
                    opacity: '0.6',
                    cursor: 'not-allowed'
                });
            }
        });
    });

    // 监听整个页面的DOM变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // 先处理页面初始加载的按钮
    $(document).ready(function() {
        $('.add_to_cart_button').prop('disabled', true).css({
            opacity: '0.6',
            cursor: 'not-allowed'
        });
    });
})(window.jQuery);

小提示：prop vs attr #

为什么用prop('disabled', true)而不是attr('disabled', 'disabled')？因为disabled是布尔类型的属性，prop()会直接修改元素的状态，而attr()只是设置HTML属性，在某些情况下可能导致元素状态和属性不一致，用prop()更可靠。

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