jquery - 阻止 Bootstrap 3 中显示选项卡内容？

Question

我正在使用 bootstrap 和 bootbox 插件，并且我有此代码

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

我显示带有数据属性的下一个选项卡，我需要的是当用户单击第二个选项卡显示引导箱警报并阻止第二个选项卡显示检查按钮是否未选中？

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();
    });

});

这是工作 fiddle 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() {

  });

});