Bootstrap CheckBox Into TabPanel Tab Doesn't Check/Uncheck

Question

The problem is that checkboxes that are inside tab-panel tabs doesn't check.

JSFiddle link

HTML Code here:

<ul class="nav nav-tabs" id="myTab">
    <li class="active">
        <a href="#home">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="home" />
                    <div style="display: inline-block;">Home</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#profiles">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="profiles" />
                    <div style="display: inline-block;">Profiles</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#messages">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="messages" />
                    <div style="display: inline-block;">Messages</div>
                </label>
            </div>
        </a>
    </li>
</ul>

Any ideas? How can I make those checkboxes do the check and uncheck function?

Answer 1

youe jquery would be

$('#myTab li').click(function (e) {
 // e.preventDefault();
    $(this).find('a').tab('show');
 // $(this).tab('show');
     $(this).closest('ul').find('input[type="checkbox"]').prop('checked','');
     $(this).closest('li').find('input[type="checkbox"]').prop('checked','checked');

});

DEMO

Answer 2

Your are preventing it for clicking. Removing e.preventDefault() would solve the problem