How do I create efficient code for a toggle between two buttons in Javascript using jQuery?
<p>I'm looking for a way to toggle between two buttons efficiently using javascript and jQuery.</p>

<h1>Scope</h1>

<p>When clicking on either Yes or No, the opposite button will get a <code>disabled</code> CSS class while the clicked button will get an <code>active</code> CSS class. A <code>var</code> will also be saved with a <code>true</code> <code>false</code> value that will be used later.</p>

<h1>html</h1>

<pre><code>&lt;div id="buttons"&gt;
  &lt;button id="yes"&gt;Yes&lt;/button&gt;
  &lt;button id="no"&gt;No&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<h1>js</h1>

<pre><code>function bindButtons(){
  var buttons = $('#buttons button');

  buttons.on('click', function(e){
    var $this = $(this);
    buttons.removeClass('selected');
    if($this.attr('id') == 'yes'){
      var el = $('#no'),
          val = true;
      $this.removeClass('disabled');
      $this.addClass('selected');
      el.addClass('disabled');
    }
    if($this.attr('id') == 'no'){
      var el = $('#yes'),
          val = false;
      $this.removeClass('disabled');
      $this.addClass('selected');
      el.addClass('disabled');
    }
    //do something with val
  })
}
bindButtons();
</code></pre>

<h1>jsFiddle</h1>

<p><a href="http://jsfiddle.net/RobertSheaO/Tjngw/2/" rel="nofollow">http://jsfiddle.net/RobertSheaO/Tjngw/2/</a></p>
