使用jquery单击后禁用按钮 - Disable the button after clicking using jquery

我正在做openart。我不希望我的用户购买多个产品，他们只能购买1个产品与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);

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

，我希望禁用该按钮。

jQuery.attr ()

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

jQuery.prop ()

Get the value of a property for the first element in the set of matched elements.

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

根据你们的代码，你们用$('.text-danger').parent().addClass('has-error');高亮显示错误。所以您可以使用prop('disabled', true)代替$(this).attr('disabled', true);，并将其添加到$('.text-danger').parent().addClass('has-error');后面

 $('.text-danger').parent().addClass('has-error');
 $(this).prop('disabled', true)

我看到您正在依赖服务调用的响应来验证成功或错误。

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

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

代码可以是这样的，

$('#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
                        }
                        }
                });

同时，如果你有错误回调函数来处理服务失败的话会更好。