twitter-bootstrap Bootstrap 标签药丸禁用和使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20668880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tabs pills disabling and with jQuery
提问by user3067524
I looked at the below example and am trying to add additional functionality. I would like to disable other two tables initially and when I submit the form from first tab and then enable second tab. I have tried using jQuery UO and jQuery. But not able to do with Bootstrap and jQuery.
我查看了下面的示例并尝试添加其他功能。我想最初禁用其他两个表，当我从第一个选项卡提交表单然后启用第二个选项卡时。我曾尝试使用 jQuery UO 和 jQuery。但无法使用 Bootstrap 和 jQuery。
Here is what I have tried so far.
这是我迄今为止尝试过的。
$(document).ready(function() {
$('#profile').attr('class', 'disabled');
$('#message').attr('class', 'disabled');
$('#profile').removeAttr('data-toggle');
$('#messages').removeAttr('data-toggle');
});
回答by melc
To disable the other two tabs and later on enable them on an event you can do the following,
要禁用其他两个选项卡，然后在事件中启用它们，您可以执行以下操作，
js
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
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>
回答by Dimitar Gospodinov
$(document).delegate('li.disabled a').on('click', function(e) { e.preventDefault(); return false; });
even if you dynamically add the 'disabled' class it will still work. cheers.
即使您动态添加“禁用”类，它仍然可以工作。干杯。
