active tab based on checkbox

Question

i have this code for tabs and what i want is that tab2 is disable by default and is only enabled if user checks checkbox1 on tab1 Any help on this?

  <!-- Custom Tabs --> <div class="nav-tabs-custom"> <ul class="nav nav-tabs pull-right"> <li><a href="#tab_3-2" target="_self" data-toggle="tab">Tab 3</a></li> <li><a href="#tab_2-2" target="_self" data-toggle="tab">Tab 2</a></li> <li class="active"><a href="#tab_1-1" target="_self" data-toggle="tab">Tab1</a></li> <li class="pull-left header"><i class="fa fa-user-plus" aria-hidden="true"></i>Testo</li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_1-1"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"id="cb1"> check1 </label> </div> </div> </div> </div> <div class="tab-pane" id="tab_3-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <!-- /.tab-pane --> </div> <!-- /.tab-pane --> </div> <!-- /.tab-content --> </div> <!-- nav-tabs-custom --> <!-- END CUSTOM TABS --> 

thanks in advance

Answer 1

This method works just fine, you need to add a trigger for when the checkbox is set to check if the tab is enabled or not, removing the value from data-toggle will disabled the tab, simply add it again to enable. As shown below. To have tab 2 disabled by default, omit the value from data-toggle in the HTML directly.

I took the liberty of adding the bootstrap dependencies to this snippet assuming you have them available in your project.

 function toggle_tab2() { if ($('#tab2').attr("data-toggle") != '') { $('#tab2').attr("data-toggle",""); console.log('tab2 disabled'); } else { $('#tab2').attr("data-toggle","tab"); console.log('tab2 enabled'); } } 

 <link href=http://getbootstrap.com/dist/css/bootstrap.min.css rel=stylesheet> <!-- Custom Tabs --> <div class="nav-tabs-custom"> <ul class="nav nav-tabs"> <li><a href="#tab_3-2" target="_self" data-toggle="tab">Tab 3</a></li> <li><a href="#tab_2-2" target="_self" data-toggle="" id="tab2">Tab 2</a></li> <li class="active"> <a href="#tab_1-1" target="_self" data-toggle="tab">Tab1</a> </li> <li class="pull-left header"> <a> <i class="fa glyphicon glyphicon-plus" aria-hidden="true"></i> Testo </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_1-1"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"id="cb1" onclick="toggle_tab2();"> check1 </label> </div> </div> </div> </div> <div class="tab-pane" id="tab_3-2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> </div><!-- /.nav-tabs-custom --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>