title: jquery toggle button add remove class
body: <p>I have tried to follow the specs on jquery documentation but i cannot initialize the label of the button programmatically and add/remove classes to it.</p>
  
  <p>Please have a look at the few lines in this jsbin.</p>
  
  <p><a href="http://jsbin.com/akinod/2/edit" rel="nofollow">http://jsbin.com/akinod/2/edit</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;label for="xAxisToggleBtn"&gt;&lt;/label&gt;
  &lt;input type="checkbox" id="xAxisToggleBtn"/&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.on {
      background-color: green;
      color: white;   
  }
  
  .off {
      background-color:brown;
      color: white;   
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>    $(window).load(function() {
  
        $("#xAxisToggleBtn").button();
  
  
        $('#xAxisToggleBtn').die('click').live('click', function(){
  
                  if($(this).is(':checked')){
                      $(this).button('option', 'label', 'Turn Off');
  
                    //why I cannot add/remove classes to change the theme?
                      $(this).addClass('on');
                      $(this).removeClass('off');
  
                  } else {
                      $(this).button('option', 'label', 'Turn On');
  
                     //why I cannot initialize add/remove classes to change the theme?
                      $(this).addClass('off');
                      $(this).removeClass('on');
  
                  }
          });
  
  });
  
  
  //why I cannot initialize the label here?
  $("#xAxisToggleBtn").button('option', 'label', 'Turn Off');
  $("#xAxisToggleBtn").attr('checked', true);
  $("#xAxisToggleBtn").addClass('on');
  </code></pre>