Question

当用户选中或取消选中复选框时，我会进行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);
                    }
                });
            });

Answer 1

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

$(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);
                  });

以下是演示：http://jsfiddle.net/ezENq/

Answer 2

您只需在单击它时禁用该复选框，然后在单击后删除禁用。

$('.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);
                    }
                });
            });

禁用复选框一会儿

2 个答案: