title: Change checkbox icon for a custom checkbox made with bootrap
body: <p>I'm using this <a href="https://bootsnipp.com/snippets/featured/beautify-checkboxes-amp-radio-input-group-addons" rel="nofollow noreferrer">bootstrap custom checkbox</a> and I wanna change the icon with jQuery. Right now the checkbox is changing only when I click on it.  </p>
  
  <pre><code>$(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('&lt;span class="' + settings[type].off.icon + '"&gt;&lt;/span&gt;');
  
          $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();
      });
  });
  </code></pre>
  
  <p>I'm changing the checkbox value with this:</p>
  
  <pre><code>if (result.status) {
      $("#statusedit").prop("checked", true);
  } else {
      $("#statusedit").prop("checked", false);
  }
  </code></pre>
  
  <p>Just calling <code>updatedisplay()</code> is not working. </p>
  
  <p>P.S.: The checkbox value is changing but the icon is the same. </p>