Question

我有一个如下所示的HTML标记：

<div id="picing-selection" class="disableMe">
    <a class="upgradeSub" value="@ViewBag.Id">
        Upgrade <i class="fa fa-money"></i>
    </a>
</div>

定义的onclick事件如下：

$(document).on("click", ".upgradeSub", function() {
    $.post("/Subscription/UpgradeSubscription", {
        SubID: $(this).attr("value") 
    }).done(function(data) {
        if (data == "Ok") {
            $(this).prop('disabled', false);
            window.location.href = "/Index/Success";
        } else if (data == "Error") {
            alert("Something went wrong");
        }
    });
});

我想禁用以后的任何onclick事件，直到服务器响应状态为“ ok”或“ Error”

我尝试过类似的事情：

$(document).on("click", ".upgradeSub", function() {
    $(this).prop('disabled', true);
    // After this goes the post to server
});

但这没有用...我仍然可以继续单击，并且jQuery将继续向服务器发布请求...

Answer 1

disable属性不适用于div。

一种解决方法是，每当您要禁用它时，就在div上添加一个disable类，然后在Click侦听器上首先检查div是否没有被禁用的类来执行其他代码。

Answer 2

您可以在同一点击处理程序中禁用所有子项，然后在通话结束后将其启用

$(document).on("click", ".upgradeSub", function ()
        {
           var $this = $(this);
           $this.children().prop('disabled',true); // disable all
            $.post("/Subscription/UpgradeSubscription", { SubID: $(this).attr("value") }).done(function (data)
            {
                $this.children().prop('disabled',false); // enable all
                if (data == "Ok") {
                    $(this).prop('disabled', false);
                    window.location.href = "/Index/Success";
                }
                else if (data == "Error") {
                    alert("Something went wrong");
                }
            });
        });

Answer 3

$(document).on("click", ".upgradeSub", function() {
  if($(this).data('isWaiting'))
    return;
  $(this).data('isWaiting', true);
  $.post("/Subscription/UpgradeSubscription", {
    SubID: $(this).attr("value")
  }).done(function(data) {
    if (data == "Ok") {
      $(this).data('isWaiting', false);
      window.location.href = "/Index/Success";
    } else if (data == "Error") {
      alert("Something went wrong");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picing-selection" class="disableMe">
  <a class="upgradeSub" value="@ViewBag.Id">
        Upgrade <i class="fa fa-money"></i>
    </a>
</div>

很明显，不需要调用$(this).data('isWaiting', false);，因为window.location将用户重定向到另一个页面，并且此调用变得无用（我们将不再单击此元素）。

Answer 4

您不能在锚点上使用disabled，而可以使用addClass()/removeClass()来玩类，例如：

$(document).on("click", ".upgradeSub", function() {
  var _this = $(this);
  _this.removeClass('upgradeSub');

  $.post("/Subscription/UpgradeSubscription", {
    SubID: $(this).attr("value")
  }).done(function(data) {
    if (data == "Ok") {
      window.location.href = "/Index/Success";
    } else if (data == "Error") {
      alert("Something went wrong");
    }

      _this.addClass('upgradeSub');
  });
});

工作示例：

$(document).on("click", ".upgradeSub", function() {
  console.log('Clicked.');

  var _this = $(this);
  _this.removeClass('upgradeSub');

  console.log("Disabled (Try to click now)");

  setTimeout(function() {
    console.log('Enabled again.');
    _this.addClass('upgradeSub');
  }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="picing-selection" class="disableMe">
  <a class="upgradeSub" value="@ViewBag.Id">Click Me</a>
</div>

Answer 5

您可以使用CSS pointer-events-

$('#picing-selection').css('pointer-events', 'none');

Answer 6

var access = 1;
$(document).on("click", ".upgradeSub", function () {
   if(access){
    access--;
    $.post("/Subscription/UpgradeSubscription", {SubID: $(this).attr("value")}).done(function (data) {
        access++;
        if (data == "Ok") {

            $(this).prop('disabled', false);
            window.location.href = "/Index/Success";
        }
        else if (data == "Error") {
            alert("Something went wrong");
        }
    });
}

})

禁用整个DIV标签以及按钮onclick事件后的所有内容

6 个答案: