Bootstrap选项卡禁用和使用jQuery

Question

我查看了下面的示例,并尝试添加其他功能.我想最初禁用其他两个表,当我从第一个选项卡提交表单然后启用第二个选项卡.我尝试过使用jQuery UO和jQuery.但是无法使用Bootstrap和jQuery.

jsFiddle演示

这是我到目前为止所尝试的.

$(document).ready(function() {
    $('#profile').attr('class', 'disabled');
    $('#message').attr('class', 'disabled');
    $('#profile').removeAttr('data-toggle');
    $('#messages').removeAttr('data-toggle');
});

Answer 1

要禁用其他两个选项卡,稍后在事件上启用它们,您可以执行以下操作,

http://jsfiddle.net/5zjXk/1/

JS

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    });
});

HTML

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
          <button>submit</button>
      </div>
      <div class="tab-pane" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
          <button>submit</button>
      </div>
      <div class="tab-pane" id="messages">
          Tetsing
      </div>
    </div>