Question

由于两个原因，我试图禁用WooCommerce 添加到购物车按钮。

为防止多次点击
要向用户显示他们的点击行为

我使用了以下代码：

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    /* Disable button on add to bag click if button is active */

    add_cart_button.on('click', function(e) {

        if (!$(this).hasClass('disabled')) {
            $(this).prop('disabled', true); // Prevent multi adds
            $(this).addClass('disabled');
        }

    });

}

尽管这行得通，但它似乎也禁用了该按钮，甚至无法正常工作，但由于表单提交似乎根本无法触发，因此无法添加产品。

为什么会发生这种情况，我需要在这里更改什么？

Answer 1

通过使用Submit事件来解决它...

由于form没有name属性，因此我不得不以另一种方式定位它：

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    add_cart_button.closest('form').on('submit', function(e) {

        var cur_atc_button = $(this).find('.single_add_to_cart_button');

        if (!cur_atc_button.hasClass('disabled')) {
            cur_atc_button.addClass('disabled');
        }

    });

}

编辑：我删除了以下禁用按钮的功能，因为对于某些类型的商品，如果您执行此操作，则无法将商品添加到购物车中：

cur_atc_button.prop('disabled', true); // Prevent multi adds

如果有人知道为什么，请告诉我。

第一次单击后禁用WooCommerce添加到购物车按钮，阻止提交

1 个答案: