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>

AJAX：

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

编辑：我注意到按钮 disabled-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"); 
  };

禁用ajax提交按钮

3 个答案: