Jquery ajax发布以禁用启用字段并获得响应

Question

我有一个禁用字段的ajax调用，然后我想在ajax完成后再次启用。我如何重新启用字段？

我的jquery

$(document).ready(function(){
$('#form-signin').submit(function(){

    $( "#response" ).fadeIn( "slow" );
    $('#response').html("<div class='message loading-response'>Loading...</div>");

    var $inputs = $(this).find("input, select, button, textarea"); //line 6
    $inputs.prop("disabled", true); //line 7

    var request = $.ajax({
        type: 'POST',
        url: 'form.php', 
        data: $(this).serialize()
    })
    .done(function(data){
        $('#response').html(data);
    })
    .fail(function() {
        alert( "Submit failed." );
        $('#response').html("<div class='message loading-response'>Submit failed.</div>");

    });
    request.always(function () { //line 23
            // reenable the inputs line 24
            $inputs.prop("disabled", false); //line 25
        }); //line 26
    return false;

});});

上面代码的结果：

1. 点击提交
2. fields disable
3. 显示响应（正在加载...）
4. 隐藏回复
5. 字段无法再次启用

如果我删除第6-7行和第23-26行：

1. 点击提交
2. fields disable
3. 显示响应（正在加载...）
4. 隐藏回复
5. 显示来自PHP操作的响应
6. 字段无法再次启用

我的PHP动作

<script>$('#response').html('<div class=\'message error\'>Error login username <?php echo $_POST['username-signin']; ?></div>');</script>

我如何得到：

1. 点击提交
2. fields disable
3. 显示响应（正在加载...）
4. 隐藏回复
5. 显示来自PHP操作的响应
6. 字段再次启用

编辑： 我的演示工作http://jsfiddle.net/TkyyC/ 但它仍无法在我的localhost中运行。

EDIT2： 只需禁用按钮

$('.sidebarsignin #submit-signin').attr('disabled','disabled');

.sidebarsignin是我的div里面的形式和 submit-signin是id按钮 谢谢所有

Answer 1

使用.removeAttr("")。您可以删除disabled属性以设置输入已启用。我创建了一个JSFiddle-Example。

Answer 2

发送： $（“＃yourfield”）。attr（“禁用”，“禁用”）;

成功： $（ “＃yourfield”）removeAttr（ “无效”）;

验证您的ajax调用是否成功，以便程序执行正确的代码。

Answer 3

.done(function(data){
        $('#response').html(data);
        $("#inputID").removeAttr("disabled");
    })

Answer 4

$.ajax({
type: 'POST',
url: 'form.php', 
data: $(this).serialize(),
beforeSend: function(){
$inputs.prop("disabled", true);
},
})
.done(function(data){
$('#response').html(data);
$("input, select, button, textarea").removeAttr("disabled");
});