Why checkbox's state does not change?

The click of checkbox will send a ajax request to server, and here is how I process the toggle:

toggleDefault: function(e) {
            e.preventDefault();
            var url = $(e.target).data('target');
            var value = $(e.target).attr('checked') ? 0 : 1;
            $.post(url, {value: value})
                .done(function() {
                    value ? $(e.target).attr('checked', true) : $(e.target).removeAttr('checked');
                })
                .error(function() {
                    alert('There is an error processing request, please try again.');
                })
        }

The disable event does work fine. But when it comes to the enable event, I can see the $(e.target).attr('checked', true) action changes the checkbox dom. But the checkbox on UI is still unclicked.

How to fix this problem?