Dunhill Dimaapi Dunhill Dimaapi - 7 months ago 30
Javascript Question

Didn't check the radio button with data-toggle=tab when I click it

This is my code.

<div class="tab-content">
<form>
<input type="radio" href="#tab1" name="rb-membership" data-toggle="tab" checked/><label style="font-size:15px">STARTER</label>
<input type="radio" href="#tab2" name="rb-membership" data-toggle="tab"/><label style="font-size:15px">STANDARD</label>
<input type="radio" href="#tab3" name="rb-membership" data-toggle="tab"/><label style="font-size:15px">ENTERPRISE</label>
</form>


So when I click the 2nd or 3rd button. There is not checked on it but the tab is working. But when I remove the data-toggle, the checked is working but the tab is not. I need to set checked the radio button when I click it.

Answer

you need to do just one thing remove data-toggle="tab" and add script

$('input[name="rb-membership"]').click(function () {
    $(this).tab('show');
});

Check this Using radio buttons for tab control using bootstrap as a reference and demo