點擊使用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); 

但IAM沒有找到它的最佳位置。我想如果驗證全部完成，並在車區域中輸入產品

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（）方法有時會將屬性值轉換爲ccount在檢索某些屬性時導致行爲不一致。因此，引入了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) 

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

此外，它會更好，如果你有錯誤回調函數，處理，如果服務失敗。