title: Prevent tab content display in bootstrap 3?
body: <p>I am using bootstrap and bootbox plugin, and i have this code</p>
  
  <p>Here is link to plugin
  <a href="http://bootboxjs.com/#download" rel="nofollow">http://bootboxjs.com/#download</a></p>
  
  <p>I am showing nex tab with data attribute, what i need is when user click on second to display bootbox alert and prevent second tab to show if check button is not check? </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tab-content"&gt;
  
      &lt;div class="tab-pane fade in active" id="step-1"&gt;
          &lt;p&gt;First&lt;/p&gt;
          &lt;p&gt;&lt;input type="checkbox" name="user" value="user"&gt;I am not robot&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="step-2"&gt;
          &lt;p&gt;Second&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;a class="pull-left" data-toggle="tab" href="#step-1"&gt;First&lt;/a&gt;
  &lt;a class="pull-right" data-toggle="tab" href="#step-2"&gt;Second&lt;/a&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("a").click(function() {
  
      bootbox.alert("Please check!", function() {
          event.preventDefault();
      });
  
  });
  </code></pre>
  
  <p>Here is working fiddle
  <a href="http://jsfiddle.net/08997uok/1/" rel="nofollow">http://jsfiddle.net/08997uok/1/</a></p>
  
  <p>I have found event</p>
  
  <pre><code>$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
       bootbox.alert("Please check!", function() {
          event.preventDefault();
      });
  })
  </code></pre>
  
  <p>But the problem is how to prevent?</p>
  
  <p>Here is some solution?</p>
  
  <pre><code>$('[data-toggle="tab"]').click(function(event) {
    if(!$('[name="user"]').is(':checked') &amp;&amp; $(event.target).attr('data-toggle') == 'tab'){
      event.preventDefault(); 
         bootbox.alert("Please check!", function() {
    });
      return false;
    }
  });
  </code></pre>