title: Open Layer, deactive ol.control.Toggle and active another one
body: <p>I have an ol.control.Bar built as below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> mainbar = new ol.control.Bar ({ toggleOne: true, group:true });
  var me = this;
  
  // Function with its level context
  function addButton(level) {
    var levelButton = new ol.control.Toggle({
      html: level,
      onToggle:  function () {
        me.getController().updateFloorplans(level);
      }
    });
    mainbar.addControl (levelButton);
  }
  
   // Insert buttons
  var indexFloor = 4;
  while(indexFloor &gt; 0){
     addButton(indexFloor);
     indexFloor--;
  };
  addButton('0');
  
  mainbar.setPosition('bottom-right');
  this.map.addControl(mainbar);</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/bTsTZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bTsTZ.png" alt="enter image description here"></a></p>
  
  <p>I would like to create a function that deactive the buttons in the ol.control.Bar (for example the 3 in the image) and active another button choose by me (ad example the button 2).
  How I can do that? </p>
  
  <p>I created this function, but instead to deactivate all the buttons that are active, it remove all the control bar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> deactiveButtons: function(){
          var self = this;
          self.map.removeControl(mainbar);
       },</code></pre>
  </div>
  </div>
  </p>