Jquery ajax post 禁用启用字段并获得响应答案

【问题标题】：Jquery ajax post to disable enable fields and get responseJquery ajax post 禁用启用字段并获得响应
【发布时间】：2013-11-28 15:34:43
【问题描述】：

我有一个 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;

});});

上面代码的结果：

点击提交
字段禁用
显示响应（加载中...）
隐藏响应
字段不再启用

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

点击提交
字段禁用
显示响应（加载中...）
隐藏响应
显示来自 PHP 操作的响应
字段不再启用

我的 PHP 操作

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

我是如何得到的：

点击提交
字段禁用
显示响应（加载中...）
隐藏响应
显示来自 PHP 操作的响应
字段再次启用

编辑：我的演示作品http://jsfiddle.net/TkyyC/ 但它仍然无法在我的本地主机中工作。

编辑2：只需禁用一个按钮

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

.sidebarsignin 是我在表单中的 div 类，并且提交登录是 id 按钮谢谢大家

【问题讨论】：

你用的是什么jquery版本？
我使用 jquery 1.10.2
如果您禁用所有输入，它们将不会被序列化并作为您的 AJAX 请求的一部分发送。假设您对此没问题，如果您只返回 #response 元素的内容而不是 <script> 标记会发生什么？

标签： javascript php jquery html ajax

【解决方案1】：

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

【讨论】：

但它应该，正如您在我的示例中所看到的 :) 。如果它不起作用，则您的脚本可能不正确。尝试在 JSFiddle 上创建一个不起作用的示例，以便我们修复它并向您展示正确的方法。

【解决方案2】：

发送时： $("#yourfield").attr("disabled", "disabled");

成功时： $("#yourfield").removeAttr("disabled");

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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");
});

【讨论】：

请补充几句解释。