提交时防止点击发布/提交的 Ajax 复选框答案

【问题标题】：Ajax Checkbox that submit with prevent click upon post/submit提交时防止点击发布/提交的 Ajax 复选框
【发布时间】：2016-03-24 17:16:50
【问题描述】：

您好，我正在使用 jquery 中的 ajax 函数来保存复选框的值。这是我的问题，如果用户多次单击，即使保存尚未完成/成功怎么办？我如何防止用户在提交表单时勾选复选框？谢谢！

这是我的代码片段：

$(".chkOverride").click(function (e) {
            var userId = $("#UserId").val();
            var isChecked = $(this).is(":checked")
            $.ajax({
                url: "/Worker/Worker?Id=" + Id + "&isChecked=" + isChecked + "&UserId=" + UserId,
                type: "post",
                success: function (result) {
                    alert("Success!");
                    location.reload();

                },
                error: function () {
                }
            });
        });

【问题讨论】：

标签： javascript jquery ajax checkbox

【解决方案1】：

您可以在开始 ajax 调用之前禁用该复选框。您可以使用prop() 方法来做到这一点。将disabled 属性值设置为true

$(".chkOverride").click(function (e) {

      var _this=$(this);
      _this.prop('disabled', true);

      var userId = $("#UserId").val();
      var isChecked = $(this).is(":checked")
      $.ajax({
                url: "/Worker/Worker?Id=" + Id + "&isChecked=" + 
                                                       isChecked + "&UserId=" + UserId,
                type: "post",
                success: function (result) {
                    alert("Success!");
                   //No point in enabling as you are going to reload the page
                   _this.prop('disabled', false);
                    location.reload();

                },
                error: function () {
                  alert("Error :(");
                   _this.prop('disabled', false);
                }
          });
});

【讨论】：

所以如果我删除该页面重新加载，我应该添加禁用的 false 属性
是的。这将从元素中删除禁用的行为。

【解决方案2】：

你有没有看到这个链接：

Inhibit a checkbox from changing when clicking it

您可以使用

禁用复选框

$this.attr('disabled', 1);

在进行 Ajax 调用之前禁用该按钮。

【讨论】：