Javascript 禁用ajax提交上的按钮

我有一个按钮，我想在ajax运行时禁用它，然后在完成后再次启用它

我的HTML：

<form name="send" class="stacked form-send-disable" id="form">
            <label for="senderID">Your phone number here (senderID)</label>
            <input type="tel" name="senderID" id="senderID" autofocus="on"   class="input-1-2" placeholder="Your number" maxlength="9">
            <label class="error" id="senderID_error" for="senderID">Please enter your own number here.</label>

            <label for="recipient" id="recipient_label">Your recipient(s)</label>
            <input type="text" name="recipient" id="recipient" class="input-1" maxlength="50" placeholder="e.g 748930493 - add multiple numbers by using a comma ' , '.">
            <label class="error" id="recipient_error" for="recipient">You need to enter at least one number here.</label>  

            <label for="message">Write your message</label>
            <textarea type="text" name="message" class="input-1" placeholder="(Write something clever..)" id="message"></textarea>
            <label class="error" for="message" id="message_error">You can't send empty messages.</label>  
            <input type="submit" name="submit" class="button btn btn-green block disabled-btn" id="submit_btn" value="Send the message(s)">         
</form>

但什么也没发生。我想我必须在ajax中调用它，这样它就可以应用于按钮了

提前谢谢

更新

$(':submit', this).prop('disabled', true); 
    $.ajax({
      type: "POST",
      url: "/index.php/sms/sender/",
      data: dataString,   
      success: function() {  
        $('#send-message').append("<div id='feedback'></div>");  
        $('#feedback').html("<p><i class='fa fa-check fa-2x'></i> Your message has been succesfully sent!</p>")  
        .append("")  
        .hide()  
        .fadeIn()
        .delay(4000)
        .fadeOut();  
        $.ajax({  
          type: "POST",
          url: "/index.php/pipit/message_sent",
          data: dataString, 
          }).always(function(){$(':submit', this).prop('disabled', false);});;
      }

$（':submit'，this）.prop（'disabled'，true）；
$.ajax({
类型：“POST”，
url:“/index.php/sms/sender/”，
数据：dataString，
成功：函数（）{
$（“#发送消息”）。追加（“”）；
$（“#反馈”）.html（“您的邮件已成功发送！
”）
.附加（“”）
.hide（）
.fadeIn（）
.延迟（4000）
.fadeOut（）；
$.ajax（{
类型：“POST”，
url:“/index.php/pipit/message\u sent”，
数据：dataString，
}).always（function（）{$（':submit'，this）.prop（'disabled'，false）；}）；；
}

---

我用上面的代码进行了更新（非常感谢A.Wolff），我的ajax请求仍然有效，但是按钮上没有变化，我认为这是因为按钮的这个特定状态缺少css，我该怎么做

感谢其他回复，我将试用它们。

您可以使用：

//using allias for nested ajax:
var _self = this;
$(':submit', _self ).prop('disabled', true);
//your nested ajax request
$.ajax(...).always(function(){$(':submit', _self ).prop('disabled', false);});

---

您可以在AJAX运行之前将按钮设置为禁用，并在AJAX完成后重新启用它

$.ajax({
    beforeSend: function() {
         $("input[type=submit]", $("#form")).attr("disabled", "disabled");
    },

    ...

    complete: function () {
        $("input[type=submit]", $("#form")).removeAttr("disabled");
    }
});

编辑：我注意到按钮上有一个类禁用btn，如果在按钮被禁用/重新启用时需要添加和删除该类，则可以通过将以下内容链接到上面来完成此操作：

.addClass("disabled-btn");

...

.removeClass("disabled-btn");

---

我假设如果是这种情况，那么应该从实际元素中删除该类作为开始。

我制作了一个工作演示，在ajax请求发生时禁用该表单。我希望它有一些用处。请参阅：

$（“#表单”）。关于（“提交”，函数（事件）{
//停止默认提交：
event.preventDefault（）；
//创建此表单的别名
$form=$（此项）；
//创建反馈元素
$feedback=$（“请稍候…”）；
$form.before（$feedback）；
//验证表单：
var valid=true；
/*[此处有一些表单验证]*/
//使用jQuery的serialize构建表单提交参数：
var dataString=$（this.serialize（）；
log（数据字符串）；
//检查是否无效
如果（！有效）{
//无效。请告诉用户
$feedback.html（“一些关于无效字段的消息！
”；
}否则{
//有效。
$form.disable（）；//禁用表单；
//使用ajax
$.ajax({
类型：“POST”，
url:“/index.php/sms/sender/”，
数据：dataString，
成功：函数（）{
$feedback
.html（“您的邮件已成功发送！
”）
.fadeIn（）
.延迟（4000）
.fadeOut（“正常”，
函数（）{$form.enable（）；}//回调以淡入窗体
);  
$.ajax（{
类型：“POST”，
url:“/index.php/pipit/message\u sent”，
数据：dataString，
});
}
});
}
返回false；
});
//用于禁用表单字段的插件函数
$.fn.disable=函数（）{
这是法德托（1.5）；
this.find（“input”）.attr（“disabled”，true）；
};
//用于启用表单字段的插件函数
$.fn.enable=函数（）{
这是fadeTo（1,1）；
this.find（“输入”）.removeAttr（“禁用”）；
};

应该可以工作。你必须有一个控制台错误。你想完全停止表单提交还是只在ajax运行时停止表单提交？我不明白如果所有的工作都由ajax完成，为什么你会希望用户能够提交表单。嘿，Moob，也许我说错了什么。ajax正在处理表单，但是一旦用户按下按钮，我希望该按钮被禁用，以便用户可以看到正在发生的事情+无法再次提交？“但是按钮上没有任何更改”按钮保持禁用或启用状态？我猜这里：

$（'：submit'，this）.prop（'disabled'，false）

此

不是指表单，因此必须更改“this”以使其返回到表单？我说的是按钮不可点击的视觉表示，我认为这必须通过css来完成，然后通过类调用此ajax？更新的答案，不确定这是您正在谈论的问题解决方案是完全完美的！唯一的问题是，我无法让它与我现有的验证一起工作，但这可能是我自己的错误。

$.ajax({
    beforeSend: function() {
         $("input[type=submit]", $("#form")).attr("disabled", "disabled");
    },

    ...

    complete: function () {
        $("input[type=submit]", $("#form")).removeAttr("disabled");
    }
});

.addClass("disabled-btn");

...

.removeClass("disabled-btn");

$("#form").on("submit", function(event) {
    //stop the default submission:
        event.preventDefault();
    //create an alias to this form
        $form = $(this);
    //create the feedback element
        $feedback = $("<div id='feedback'>Please wait...</div>");
        $form.before($feedback);
    //validate the form:
        var valid = true;
        /*[some form validation here]*/
    //use jQuery's serialize to build the form submission params:
        var dataString = $(this).serialize();
        console.log(dataString);
    //check if invalid
        if(!valid){
            //not valid. tell the user
            $feedback.html("<p>Some message about invalid fields!</p>");
        } else {
            //valid.
            $form.disable();//disable the form;
            //do the ajax
            $.ajax({
                type: "POST",
                url: "/index.php/sms/sender/",
                data: dataString,   
                success: function() {  
                    $feedback  
                        .html("<p><i class='fa fa-check fa-2x'></i> Your message has been succesfully sent!</p>") 
                        .fadeIn()
                        .delay(4000)
                        .fadeOut("normal",
                        function(){$form.enable();}//callback to fade the form back in
                    );  
                    $.ajax({  
                        type: "POST",
                        url: "/index.php/pipit/message_sent",
                        data: dataString, 
                    });
                }
            });
        }
    return false; 
});

//plugin function to disable form fields
$.fn.disable = function(){
    this.fadeTo(1,.5);
    this.find("input").attr("disabled", true); 
  };
//plugin function to enable form fields    
    $.fn.enable = function(){
    this.fadeTo(1,1);
    this.find("input").removeAttr("disabled"); 
  };