3

I am using bootstrap and bootbox plugin, and i have this code

Here is link to plugin http://bootboxjs.com/#download

I am showing nex tab with data attribute, what i need is when user click on second to display bootbox alert and prevent second tab to show if check button is not check?

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

});

Here is working fiddle http://jsfiddle.net/08997uok/1/

I have found event

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

But the problem is how to prevent?

Here is some solution?

$('[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;
  }
});
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142

1 Answers1

5

I'm not getting what exactly you want, but if you want to check whether the checkbox is checked at the time of selecting the second tab and if it's not checked you don't want to show the second tab content as well as the alert, the you can do the following.

$('[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() {

  });

});
Indranil Mondal
  • 2,799
  • 3
  • 25
  • 40