jquery - Prevent tab content display in bootstrap 3? -
jquery - Prevent tab content display in bootstrap 3? -
i using bootstrap , bootbox plugin, , have code
here link plugin http://bootboxjs.com/#download
i showing nex tab info attribute, need when user click on sec display bootbox alert , prevent sec tab show if check button 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 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 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 problem how prevent?
here 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() { }); homecoming false; } });
i'm not getting want, if want check whether checkbox checked @ time of selecting sec tab , if it's not checked don't want show sec tab content alert, can following.
$('[data-toggle="tab"]').click(function(event) { if(!$('[name="user"]').is(':checked') && $(event.target).attr('href') == '#step-2'){ event.preventdefault(); homecoming false; } bootbox.alert("hello world!", function() { }); });
jquery twitter-bootstrap-3 bootbox
Comments
Post a Comment