Estou tetando ocultar e mostrar abas de forma dinâmica de acordo com a opção selecionada pelo usuário em
um checkbox e não estou conseguindo fazer as abas serem mostradas.
Por exemplo o usuário clica em Cliente e Secretaria apenas as abas cliente e secretaria devem ser mostradas
ou seja as abas devem ser construídas de maneira dinâmica.
Minha página html:
<!-- Listagem com todos os tipos -->
<tr th:each="usuario : ${pagina.conteudo}">
<td>
<div class="checkbox">
<input type="checkbox" class="next" data:codigo="${usuario.codigo}">
<label>Descrição de cada tipo de usuário</label>
</div>
</td>
<div id="abaCadastro" class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#principal" data-toggle="tab">Principal</a>
</li>
<!-- Abas de formas dinâmica de acordo com a opção que o usuário selecionar-->
<li><a href="#selecionado" data-toggle="tab">Opção selecionada</a></li>
<!-- -->
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="principal">
<h3>Formulário principal</h3>
</div>
<div class="tab-pane" id="selecionado">
<h3>Formulário com a opção selecionada</h3>
</div>
</div>
</div>
Meu JavaScript
$(function(){
$('.nav li').not('.active').addClass('disabled');
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
$('input[type="checkbox"].next').click(function(){
$lia = $('.nav li.active');
$li = $('.nav li.active').next('li');
$li.removeClass('disabled');
$li.find('a').attr("data-toggle","tab");
$li.find('a').click();
$lia.addClass('disabled');
$lia.find('a').removeAttr("data-toggle");
});
$(!'input[type="checkbox"].checked').click(function(){
$lia = $('.nav li.active');
$li = $('.nav li.active').prev('li');
$li.removeClass('disabled');
$li.find('a').attr("data-toggle","tab");
$li.find('a').click();
$lia.addClass('disabled');
$lia.find('a').removeAttr("data-toggle");
});
});