使用jQuery單擊后禁用按鈕

Question

我在做opencart。 我不希望我的用戶購買多種產品，他們只能購買具有1個客戶ID的1種產品，因此，我希望我的添加到購物車按鈕可以幫助我。 如果成功執行添加到購物車過程，我希望禁用此按鈕（只讀）。

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（）

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');高亮顯示錯誤$('.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)

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
                        }
                        }
                });

另外，如果您有錯誤回調功能，則可以更好地處理服務失敗的情況。