CODEWITHSUNDEEP
htmltwitter-bootstrap
Carlos Henrique Biazin Esteves
Carlos Henrique Biazin Esteves

Reputation: 567

Bootstrap nav-tabs Disabled and enabled

I need to disabled one of my tab when the page is loaded. After the user select a iten, it's necessary enable that tab and simulate a click on it. The disabled event it's work for me, but when I remove disabled class that my "li" the event click in this tab not do nothing...

<ul id="tab-principal" class="nav nav-tabs nav-justified" role="tablist">
    <li class="active" id="navPesquisa"><a data-target="#divPesquisa" data-toggle="tab">Pesquisa</a></li>
    <li role="presentation" id="navDadosDocumento"><a href="#divDetalhes" aria-controls="divDetalhes" role="tab" data-toggle="tab">Dados do Documento</a></li>
</ul>

Disabling the tab

// Desabilita a aba de dados do aço interno
$('#navDadosDocumento').attr('class', 'disabled');

Enabling and click in the tab

$('#navDadosDocumento').removeAttr('class', 'disabled');
$('a[href="#divDetalhes"]').trigger('click');

Upvotes: 0

Views: 6753

Answers (2)

sid-m
sid-m

Reputation: 1554

.removeAttr() takes only one parameter, the attribute to remove. To add and remove classes, jQuery provides .addClass() and .removeClass() methods

Ref: https://api.jquery.com/removeAttr/ https://api.jquery.com/removeClass/

So to make your code work, replace

$('#navDadosDocumento').removeAttr('class', 'disabled');

with

$('#navDadosDocumento').removeClass('disabled');

Upvotes: 2

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

try to something like this.

  $( document ).ready(function() {
    $('#navDadosDocumento').attr('class', 'disabled');
  });
  $( "#divDetalhes" ).click(function() {
    $('#navDadosDocumento').removeAttr('class', 'disabled');
    $('a[href="#divDetalhes"]').trigger('click');
  });

Also check here

$( document ).ready(function() {
    $('#navDadosDocumento').attr('class', 'disabled');
});
$( "#divDetalhes" ).click(function() {
    $('#navDadosDocumento').removeAttr('class', 'disabled');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul id="tab-principal" class="nav nav-tabs nav-justified" role="tablist">
    <li class="active" id="navPesquisa"><a data-target="#divPesquisa" data-toggle="tab">Pesquisa</a></li>
    <li role="presentation" id="navDadosDocumento"><a href="#divDetalhes" aria-controls="divDetalhes" role="tab" data-toggle="tab">Dados do Documento</a></li>
</ul>

Upvotes: 0

Related Questions