防止在bootstrap 3中显示标签内容？

Question

我正在使用bootstrap和bootbox插件,我有这个代码

这是插件http://bootboxjs.com/#download的链接

我正在显示带有数据属性的nex选项卡,我需要的是当用户单击第二个以显示引导框警报并阻止第二个选项卡显示检查按钮是否未检查？

HTML

<div class="tab-content">

    <div class="tab-pane fade in active" id="step-1">
        <p>First</p>
        <p><input type="checkbox" name="user" value="user">I am not robot</p>
    </div>
    <div class="tab-pane fade" id="step-2">
        <p>Second</p>
    </div>

</div>


<a class="pull-left" data-toggle="tab" href="#step-1">First</a>
<a class="pull-right" data-toggle="tab" href="#step-2">Second</a>

JS

$("a").click(function() {

    bootbox.alert("Please check!", function() {
        event.preventDefault();
    });

});

这是工作小提琴 http://jsfiddle.net/08997uok/1/

我找到了活动

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
     bootbox.alert("Please check!", function() {
        event.preventDefault();
    });
})

但问题是如何预防？

这是一些解决方案？

$('[data-toggle="tab"]').click(function(event) {
  if(!$('[name="user"]').is(':checked') && $(event.target).attr('data-toggle') == 'tab'){
    event.preventDefault(); 
       bootbox.alert("Please check!", function() {
  });
    return false;
  }
});

Answer 1

我没有得到你想要的东西,但如果你想检查在选择第二个标签时是否选中了复选框,如果没有选中,你不想显示第二个标签内容以及警报,你可以做到以下几点.

$('[data-toggle="tab"]').click(function(event) {
  if(!$('[name="user"]').is(':checked') && $(event.target).attr('href') == '#step-2'){
    event.preventDefault(); 
    return false;
  }
  bootbox.alert("Hello world!", function() {

  });

});