在ajax提交上禁用按鈕

Question

我有這個按鈕，我想在我的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>

阿賈克斯：

<---- Some form validation going on up here ------>

var dataString = 'recipient=' + recipient + '&message=' + message + '&senderID=' + senderID;  
    //alert (dataString);return false;  

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


    });  
    return false;

  });  

我嘗試在文檔中執行以下操作：

jQuery：

$('#form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});

但是什么也沒發生。 我想我必須以某種方式在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);});;
      }

我更新了上面的代碼（非常感謝A.Wolff），我的ajax請求仍然有效，但是按鈕上沒有任何變化，我認為這是因為按鈕的這種特定狀態缺少CSS，該怎么辦我去這個？

感謝其他答復，我將嘗試一下。

Answer 1

您可以使用：

//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);});

Answer 2

您可以在AJAX運行之前將按鈕設置為禁用，並在ajax完成后將其重新啟用。

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

    ...

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

編輯：我注意到在按鈕disable-btn上有一個類，如果由於按鈕被禁用/重新啟用而需要添加和刪除，則可以通過將以下內容鏈接到上面來實現：

.addClass("disabled-btn");

...

.removeClass("disabled-btn");

我認為如果是這種情況，則應該從實際元素中刪除該類。

Answer 3

我進行了一個工作演示，該演示在ajax請求發生時禁用了表單。 我希望它有一定用處。 請參閱： http ： //jsfiddle.net/EWkpR/

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