title: enable/disable tab on checkbox selection
body: <p>I have a checkbox in a jsp page, when i clicked that checkbox control goes to 2nd tab(div) i.e. <h2>An imaginary basket is here...</h2> but if i have not checked then control will stay in 1st tab and despite clicking on 2nd tab control will not go to 2nd tab. 
  Full source code : <a href="http://flowplayer.org/tools/demos/tabs/wizard.html" rel="nofollow">http://flowplayer.org/tools/demos/tabs/wizard.html</a></p>
  
  <p>But my requirement is when i checked the checkbox then automatically control will take me to 2nd tab. But here after checking checkbox i have to click on 2nd tab then only i am seeing it's contents. But i want that after cheking the checkbox present in 1st tab, control will automatically take me to 2nd tab. How can it be done? Please i need help.</p>
  
  <pre><code>I am giving codes:
  1. First tab content
  2. Second tab content
  3. Third content
  4. Full source code
  </code></pre>
  
  <p>First tab code: </p>
  
  <pre><code>&lt;div&gt;
  
          &lt;label&gt;
              Username &lt;br /&gt;
              &lt;input name="username"/&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
              Email &lt;br /&gt;
              &lt;input name="email"/&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
              &lt;input id="terms" type="checkbox" /&gt;
              I accept &lt;a href="#"&gt;these&lt;/a&gt; terms and conditions
          &lt;/label&gt;
  
          &lt;p&gt;
              &lt;button class="next"&gt;Next &amp;raquo;&lt;/button&gt;
          &lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Second Tab Code:</p>
  
  <pre><code>&lt;div&gt;
          &lt;h2&gt;An imaginary basket is here...&lt;/h2&gt;
  
          &lt;p&gt;
              &lt;button class="prev"&gt;&amp;laquo; Prev&lt;/button&gt;
              &lt;button class="next"&gt;Next &amp;raquo;&lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Third Tab code:</p>
  
  <pre><code>&lt;div&gt;
          &lt;h2&gt;An imaginary order is here...&lt;/h2&gt;
  
          &lt;p&gt;
              &lt;button class="prev"&gt;&amp;laquo; Prev&lt;/button&gt;
          &lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Full souce code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;!--
  This is a jQuery Tools standalone demo. Feel free to copy/paste.
  
  http://flowplayer.org/tools/demos/
  
  Do *not* reference CSS files and images from flowplayer.org when in production  
  
  Enjoy!
  </code></pre>
  
  <p>--></p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;jQuery Tools standalone demo&lt;/title&gt;
  
  &lt;!-- include the Tools --&gt;
  &lt;script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- standalone page styling (can be removed) --&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/&gt;   
  
  
  
  &lt;!-- tab styling --&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css"/&gt;
  
  
  &lt;style&gt;
  
  accept
  I think this will solve your problem,
  
  It has validations on checkboxes to continue with next tabs.
  
  http://flowplayer.org/tools/demos/tabs/wizard.html
  
  /* tab pane styling */
  .panes div {
  display:none;       
  padding:15px 10px;
  border:1px solid #999;
  border-top:0;
  height:100px;
  font-size:14px;
  background-color:#fff;
  }
  
  
  div.panes div {
      background:#fff url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x 0 5px;
      -background:#fff;
      height:172px;
  }
  
  div.panes label {
      margin-bottom:15px;
      display:block;
  }
  
  label.error {
      color:red;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wizard"&gt;
  
  &lt;!-- tabs --&gt;
  &lt;ul class="tabs"&gt;
      &lt;li&gt;&lt;a href="#" class="w2"&gt;Personal info&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="w2"&gt;Shopping basket&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="w2"&gt;Review order&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- panes --&gt;
  &lt;div class="panes"&gt;
      &lt;div&gt;
  
          &lt;label&gt;
              Username &lt;br /&gt;
              &lt;input name="username"/&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
              Email &lt;br /&gt;
              &lt;input name="email"/&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
              &lt;input id="terms" type="checkbox" /&gt;
              I accept &lt;a href="#"&gt;these&lt;/a&gt; terms and conditions
          &lt;/label&gt;
  
          &lt;p&gt;
              &lt;button class="next"&gt;Next &amp;raquo;&lt;/button&gt;
          &lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h2&gt;An imaginary basket is here...&lt;/h2&gt;
  
          &lt;p&gt;
              &lt;button class="prev"&gt;&amp;laquo; Prev&lt;/button&gt;
              &lt;button class="next"&gt;Next &amp;raquo;&lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h2&gt;An imaginary order is here...&lt;/h2&gt;
  
          &lt;p&gt;
              &lt;button class="prev"&gt;&amp;laquo; Prev&lt;/button&gt;
          &lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- activate tabs with JavaScript --&gt;
  &lt;script&gt;
  $(function() {
  
  
  
  // get container for the wizard and initialize its exposing
  var wizard = $("#wizard").expose({color: '#789', lazy: true});
  
  // enable exposing on the wizard
  wizard.click(function() {
      $(this).expose().load();
  });
  
  
  
  // enable tabs that are contained within the wizard
  $("ul.tabs", wizard).tabs("div.panes &gt; div", function(event, index) {
  
      /* now we are inside the onBeforeClick event */
  
      // ensure that the "terms" checkbox is checked.
      var terms = $("#terms");
      if (index &gt; 0 &amp;&amp; !terms.get(0).checked)  {
          terms.parent().addClass("error");
  
          // when false is returned, the user cannot advance to the next tab
          return false;
      }
  
      // everything is ok. remove possible red highlight from the terms
      terms.parent().removeClass("error");
  });
  
  
  
  // get handle to the tabs API
  var api = $("ul.tabs", wizard).data("tabs");
  
  // "next tab" button
  $("button.next", wizard).click(function() {
      api.next();
  });
  
  // "previous tab" button
  $("button.prev", wizard).click(function() {
      api.prev();
  });
  
  });
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>