JQuery在ajax提交期间禁用输入

Question

我正在使用Django,JQuery和JQuery Form插件(http://jquery.malsup.com/form/)创建一个表单,我想在等待服务器响应时禁用表单的字段.我的代码是:

$(document).ready(function () {
        $('#load').hide();
        $('#error').hide();
        $('#success').hide();
        var myForm = $(this).find('input'); //finding all inputs
        $('#save').live('click', function () {
            $('#save_form').ajaxSubmit({
                success:function (data, statusText, xhr, $form) {
                    alert('success');
                    $form.find('.error').remove();
                    if (data['result'] == 'success') {
                        $('#success').show("slow");
                    }
                    else if (data['result'] == 'error') {
                        $('#error').show("fast");
                        //calling procedure to show errors
                    }
                    $('#load').hide("fast");
                },
                beforeSubmit: function(arr, $form, options) {
                    $('#error').hide();
                    $('#success').hide();
                    $('#load').show("fast");
                    $(myForm).attr('disabled', true);
                    alert('before submit');
                    return true;
                },
                error: function() {
                    alert("Failed to submit!");
                    $('#load').hide("fast");
                },
                timeout: 3000,
                dataType:'json'
            });
        });
    })

因此,当我按下保存时,我看到输入被禁用,我正在"提交前"警报框,但是当我按下OK时,所有输入都会启用,即使我关闭响应服务器也是如此.

我怎样才能使它工作？

Answer 1

$(function(){
      $(".load")
           .ajaxStart(function () {
              $("input").attr("disabled", "disabled");
          })
         .ajaxComplete(function(){
            $("input").removeAttr("disabled");
         });
});