Question

我正在开发opencart。我不希望我的用户购买多个产品，他们只能购买1个客户ID的产品，所以为此我想要我的添加到购物车按钮来帮助我。如果成功执行添加到购物车进程，我希望禁用此按钮（只读）。

HTML：

 <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>

Jquery的：

<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
$.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
    dataType: 'json',
    beforeSend: function() {
        $('#button-cart').button('loading');
    },
    complete: function() {
        $('#button-cart').button('reset');
    },
    success: function(json) {
        $('.alert, .text-danger').remove();
        $('.form-group').removeClass('has-error');

        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    var element = $('#input-option' + i.replace('_', '-'));

                    if (element.parent().hasClass('input-group')) {
                        element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    } else {
                        element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
            }

            if (json['error']['recurring']) {
                $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
            }

            // Highlight any found errors
            $('.text-danger').parent().addClass('has-error');
        }

        if (json['success']) {
            $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

            $('#cart > button').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);

            $('html, body').animate({ scrollTop: 0 }, 'slow');

            $('#cart > ul').load('index.php?route=common/cart/info ul li');
        }
    }
});
});//--></script>

我知道这会解决问题

$(this).attr('disabled', true);

但我没有找到最佳位置。如果验证全部完成并且产品已输入购物车区域

，我希望该按钮被禁用

Answer 1

<强> jQuery.attr（）

而，

<强> jQuery.prop（）

Get the value of an attribute for the first element in the set of matched elements.

在jQuery 1.6之前，attr（）方法在检索某些属性时有时会考虑属性值，这会导致行为不一致。因此，引入了prop（）方法。截至jQuery 1.6。，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

根据您的代码，您突出显示Get the value of a property for the first element in the set of matched elements.错误。所以您可以使用$('.text-danger').parent().addClass('has-error');代替prop('disabled', true)并将其添加到$(this).attr('disabled', true);之后

$('.text-danger').parent().addClass('has-error');

Answer 2

我发现您依靠服务调用的响应来验证成功或错误。

在这种情况下，最好在调用服务后立即禁用该按钮，并等待响应。

如果您的验证成功，则在回复后，无需担心，否则重新启用按钮并通知用户错误并要求在需要时进行更改。

所以代码可能是这样的，

$('#button-cart').on('click', function() {
        var _button_ref = this;
                $(_button_ref).attr('disabled', true);
                $.ajax({
                url: 'index.php?route=checkout/cart/add',
                        type: 'post',
                        data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
                        dataType: 'json',
                        beforeSend: function() {
                        $('#button-cart').button('loading');
                        },
                        complete: function() {
                        $('#button-cart').button('reset');
                        },
                        success: function(json) {
                        $('.alert, .text-danger').remove();
                                $('.form-group').removeClass('has-error');
                                if (json['error']) {
                        // your logic
                        $(_button_ref).attr('disabled', 'false');
                        }

                        if (json['success']) {
                        // your logic
                        }
                        }
                });

此外，如果您有错误回调函数，最好在服务失败时进行处理。

单击使用jquery后禁用该按钮

2 个答案: