Jquery 暂时禁用复选框

当用户选中或取消选中某个复选框时，我会调用ajax，保存设置更改。成功后，我会显示一个小标签，通知用户设置已应用，然后淡出。我想禁用复选框，从单击它到我淡出消息。我该怎么做

$('.role-checkbox').click(function () {
                var this_control = $(this);
                $.ajax({
                    url: _SITEURL + 'User/EnableDisableRole',
                    data: JSON.stringify({ data }),
                    contentType: "application/json;charset=utf-8",
                    type: 'POST',
                    success: function () {
                        var saved_label = $('<span class="label label-success">Saved</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);

                    },
                    error: function () {
                        var saved_label = $('<span class="label label-important">Error Saving!</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);
                    }
                });
            });

$（'.role复选框'）。单击（函数（）{
var this_control=$（this）；
$.ajax({
url:_SITEURL+“用户/启用禁用角色”，
数据：JSON.stringify（{data}），
contentType:“应用程序/json；字符集=utf-8”，
键入：“POST”，
成功：函数（）{
var saved_label=$（“saved”）
.hide（）.appendTo（此控件.parent（））.fadeIn（500）.delay（3000）.fadeOut（500）；
},
错误：函数（）{
var saved_label=$（'Error Saving！'）
.hide（）.appendTo（此控件.parent（））.fadeIn（500）.delay（3000）.fadeOut（500）；
}
});
});

首先，您需要禁用复选框：

$(this).prop('disabled',true);

接下来，您需要在

fadeout

回调中将其取消禁用：

var saved_label = $('<span class="label label-success">Saved</span>')
                  .hide()
                  .appendTo(this_control.parent())
                  .fadeIn(500)
                  .delay(3000)
                  .fadeOut(500, function(){
                      this_control.prop('disabled',false);
                  });

var saved\u label=$（“saved”）
.hide（）
.appendTo（此_控件.parent（））
法丹先生（500）
.延迟（3000）
.fadeOut（500，函数（）{
此控件属性（'disabled'，false）；
});

---

下面是一个演示：

您只需要在他们单击复选框时禁用它，然后在单击后删除禁用

$('.role-checkbox').click(function () {
                var this_control = $(this);
                this_control.prop("disabled","disabled");
                $.ajax({
                    url: _SITEURL + 'User/EnableDisableRole',
                    data: JSON.stringify({ data }),
                    contentType: "application/json;charset=utf-8",
                    type: 'POST',
                    success: function () {
                        this_control.removeProp("disabled");
                        var saved_label = $('<span class="label label-success">Saved</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);

                    },
                    error: function () {
                        this_control.removeProp("disabled");
                        var saved_label = $('<span class="label label-important">Error Saving!</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);
                    }
                });
            });

$（'.role复选框'）。单击（函数（）{
var this_control=$（this）；
此控件道具（“禁用”、“禁用”）；
$.ajax({
url:_SITEURL+“用户/启用禁用角色”，
数据：JSON.stringify（{data}），
contentType:“应用程序/json；字符集=utf-8”，
键入：“POST”，
成功：函数（）{
此控件移除属性（“禁用”）；
var saved_label=$（“saved”）
.hide（）.appendTo（此控件.parent（））.fadeIn（500）.delay（3000）.fadeOut（500）；
},
错误：函数（）{
此控件移除属性（“禁用”）；
var saved_label=$（'Error Saving！'）
.hide（）.appendTo（此控件.parent（））.fadeIn（500）.delay（3000）.fadeOut（500）；
}
});
});

建议您使用prop（）启用/禁用元素。您说得很对。我会换的。仍然使用旧方法。

$（此）

将窗口包装在

成功

和

错误

回调中。