Question

When users check or uncheck a checkbox, I make an ajax call, saving the setting change. On success, I display a small label notifying user that setting has been applied and then fade it out. I’d like to disable the checkbox from the time it was clicked to the time I fade out the message. How would I do this?

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

First, you need to disable the checkbox:

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

Next, you need to undisable it in the fadeout callback:

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

Here is a demonstration: http://jsfiddle.net/ezENq/