Prevent tab content from showing on boot 3?
I am using bootstrap and bootbox plugin and I have this code
Here is a link to the plugin http://bootboxjs.com/#download
I am showing a nex tab with a data attribute, do I need when the user clicks for a second to display a boot box warning and not show the second tab if the validate button is not checked?
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 works here http://jsfiddle.net/08997uok/1/
I found an 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 it?
Here's the 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;
}
});
+3
source to share
1 answer
I don't get what you want, but if you want to check if a checkbox is checked when the second tab is selected and if it hasn't been checked, you also don't want to show the contents of the second tab as a warning, 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() {
});
});
+5
source to share