single-on-off-components.js

$(function() {
  var updatingCheckboxes = false,
  $components = $('.component-checkbox');

  $components.change(function(e) {
    if (updatingCheckboxes) { return; }

    var $el = $(this),
    checked = $el.is(':checked');

    if (checked) {
      e.preventDefault();
      updatingCheckboxes = true;

      // Set all on/off components to unchecked state
      $components.prop("checked", false);
      $components.parent().removeClass('btn-success').addClass('btn-default');
      $('.toggle__text').text('Add');

      // Set selected component to checked state
      $el.prop("checked", true);
      $el.parent().removeClass('btn-default').addClass('btn-success');
      $('.toggle__text', $el).text(!checked ? 'Added' : 'Add');
      
      updatingCheckboxes = false;
    }
  });
});