Kendo Panelbar - Adding a checkbox to panels to select multiple panel header

Question

What I want to achieve is to add checkboxes to the panel headers in a PanelBar like in the following fiddle which I have created.

Below is the html:

<ul id='panelbar'>
    <li class='k-state-active'> <span class='k-link k-state-selected'>Tab 1 <input type="checkbox" class="cbSelect"/></span>
        <div>Test 1</div>
    </li>
    <li> <span class='k-link k-state-selected'> Tab2 <input type="checkbox" class="cbSelect"/></span>
        <div>Test 2</div>
    </li>
</ul>

I've found that when you try to check the checkbox, that tab opens.

Is it possible to disable the onclick method for the clicked tab when clicking on the checkbox?

and if so, any ideas on how I can achieve this?

Answer 1

Just prevent the propagation :

$("#panelbar").on("click", "input.cbSelect", function(evt) {
    evt.stopPropagation();
})

See : jsFiddle.