Bootstrap選項卡藥片禁用和jQuery

我看了下面的例子，並試圖添加額外的功能。我想最初禁用其他兩個表格，並且當我從第一個選項卡提交表單並啓用第二個選項卡時。我曾嘗試使用jQuery UO和jQuery。但無法使用Bootstrap和jQuery。Bootstrap選項卡藥片禁用和jQuery

jsFiddle Demo

這裏是我到目前爲止已經試過。

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

來源

2013-12-18 user3067524

請張貼您的代碼。 – brandonscript

jsfiddle.net的鏈接必須附有代碼。 – Blazemonger

要禁用其他兩個選項卡，後來讓他們對一個事件，你可以做到以下幾點，

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

$(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>

來源

2013-12-18 22:54:35 melc

嗨感謝您的回覆。你看起來像禁用，我可以點擊它。 – user3067524

@ user3067524的確，我沒有注意到。請在這裏找到更新http://jsfiddle.net/5zjXk/1/。我也會更新答案。 – melc

這是我的菲娜反駁。 Evryting看起來不錯，但是在初始加載時，它並沒有在第一個ttab上顯示任何內容，也無法點擊。 http://jsfiddle.net/5zjXk/2/ – user3067524

$(document).delegate('li.disabled a').on('click', function(e) { e.preventDefault(); return false; });

即使您動態添加「禁用」類，它仍然可以工作。乾杯。

來源

2015-07-02 13:27:32

Bootstrap選項卡藥片禁用和jQuery

回答

相關問題