點擊使用jquery後禁用按鈕

我正在使用opencart。我不希望我的用戶購買多種產品，他們只能購買1個客戶ID爲1的產品，所以爲此我希望我的購物車按鈕可以幫助我。如果添加到購物車進程成功執行，我希望此按鈕被禁用（只讀）。點擊使用jquery後禁用按鈕

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沒有找到它的最佳位置。我想如果驗證全部完成，並在車區域中輸入產品

來源

2015-10-16 Ammar Ul Hassan

用這個'jQuery'方法，按鈕只會被禁用一次。如果最終用戶刷新頁面或移動到其他頁面並返回;他/她將能夠看到處於「啓用」狀態的按鈕。 – vijayP

@vijayP如果它已禁用當前用戶，如果他已將產品添加到購物車中，哪種方法將會罰款？ –

您將不得不使用'jQuery'方法以及服務器端驗證來實現您的目標。例如 - 在渲染頁面時;在創建按鈕時，必須有服務器端代碼的「if」條件來檢查當前產品是否存在於購物車中。如果它在那裏，而不是「添加」按鈕，顯示虛擬禁用添加按鈕沒有點擊事件。其次，使用上面的代碼將'ajax'添加到購物車和'成功'處理程序中，而不是禁用按鈕，我會建議用虛擬按鈕替換原始按鈕，不要點擊事件。 – vijayP

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)

來源

2015-10-16 11:51:55 urfusion

我知道，但是在上面提到的jquery代碼中使用它是我的問題嗎？ –

你，但你沒有回答問題 –

@AmmarUlHassan：檢查更新的答案。 – urfusion

我看你是依靠從您的服務請求的響應，以驗證成功或錯誤。

在這種情況下，一旦您的服務被調用，最好禁用該按鈕，然後等待響應。

迴應後，如果您的驗證成功，則不用擔心，否則重新啓用按鈕並通知用戶該錯誤並要求進行更改（如果需要）。

因此，代碼可能是這樣的，

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

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

來源

2015-10-16 12:15:47 Amit

我試過了它沒有工作:( –

點擊使用jquery後禁用按鈕

回答

相關問題