Change checkbox icon for a custom checkbox made with bootrap

I'm using this bootstrap custom checkbox and i wanna change the icon with jquery. Right now the checkbox it's changing only when i click on it.

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

I'm changing the checkbox value with this :

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

just calling updatedisplay() it's not working. P.S.: The checkbox value is changing but the icon is the same ...