在$ .ajax

Question

我在列表中有一组按钮，其中一些按钮有一个disabled。

我想做什么

当我点击非禁用按钮时，我想将禁用添加到所有按钮。完成ajax请求后，我希望只有先前和单击的按钮才能有disabled类。

我试过

$(document).on('click', '.myButton', function (e) {

    /* Get this Button */
    var $btn = $(this);

    /* Get all disabled Buttons */
    var allDisabled = $('.disabled');

    /* Add disabled to all buttons */
    $('.buttonAction').addClass('disabled');

    /* Do Ajax Stuff */
    $.ajax({
       type: 'GET',
       ...
       success: function (data) {

           /* Remove all 'disabled' from Buttons */
           $('.buttonAction').removeClass('disabled');

           /* Add 'disabled' to this Button */
           $btn.addClass('disabled');

          /* Add 'disabled' to all previous Buttons */
          allDisabled.each(function(){
              $(this).addClass('disabled');
          });       
       },
       ...

   });
});

不幸的是allDisabled.each函数会将disabled分配给所有按钮。

我错了吗？

Answer 1

您只能使用那些需要暂时禁用的按钮进行操作，而不是删除所有对象并向其添加类：

$(document).on("click", ".my-button", function() {
    var $btn = $(this);
    var $disableDuringAjax = $(".buttonAction:not(.disabled)").addClass("disabled");

    $.ajax({
        type: 'GET'
    })
    .done(function (data) {
       $disableDuringAjax.removeClass("disabled");
       $btn.addClass('disabled');
    });
});

这样，disabled类不会为按钮切换两次，按钮根本不应该启用。