更改使用bootrap创建的自定义复选框的复选框图标

Question

我正在使用此bootstrap custom checkbox，我想用jQuery更改图标。现在，只有当我点击它时，复选框才会改变。

$(function () {
    $('.input-group-addon.beautiful').each(function () {

        var $widget = $(this),
            $input = $widget.find('input'),
            type = $input.attr('type');
        settings = {
            checkbox: {
                on: {icon: 'fa fa-check-circle-o'},
                off: {icon: 'fa fa-circle-o'}
            },
            radio: {
                on: {icon: 'fa fa-dot-circle-o'},
                off: {icon: 'fa fa-circle-o'}
            }
        };

        $widget.prepend('<span class="' + settings[type].off.icon + '"></span>');

        $widget.on('click', function () {
            $input.prop('checked', !$input.is(':checked'));

            updateDisplay();
        });

        function updateDisplay() {
            var isChecked = $input.is(':checked') ? 'on' : 'off';

            $widget.find('.fa').attr('class', settings[type][isChecked].icon);

        }

        updateDisplay();
    });
});

我用这个更改复选框值：

if (result.status) {
    $("#statusedit").prop("checked", true);
} else {
    $("#statusedit").prop("checked", false);
}

只是致电updatedisplay()无效。

P.S。：复选框值正在改变，但图标是相同的。