提交时带有防止点击发布/提交的Ajax复选框

Ajax Checkbox that submit with prevent click upon post/submit

本文关键字：提交 复选框 Ajax      更新时间：2023-09-26

嗨，我正在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 () {
                }
            });
        });

您可以在启动ajax调用之前禁用该复选框。您可以使用prop()方法来执行此操作。将disabled属性值设置为真正的

$(".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);
                }
          });
});

你遇到过这个链接吗：

点击时禁止更改复选框

您可以使用禁用复选框

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

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

相关文章：