0

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

2 回答 2

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/

于 2012-12-06T17:42:12.737 回答
0

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

$('.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);
                    }
                });
            });
于 2012-12-06T17:42:26.943 回答