checkbox - 展開または折りたたむことができる Kendo UI PanelBar のチェックボックスをどのように切り替えますか?

Question

各レベルにチェックボックスがあるいくつかの拡張可能なオプションを備えたパネル バーを作成しようとしています。私が直面している問題は、展開可能なパネルの一部であるチェックボックスをクリックすると、チェックボックスがトグルしないことです。以下は、問題を示す簡単な例です。以下の例では、メイン 1のチェックボックスを切り替えることはできません。

const panelBarTemplate = `
    <span class='k-state-default'>
        <span>#: item.text #</span>
        <input type='checkbox'
            id=#: item.id #
            class='k-checkbox'
            # if (item.isVisible) { #checked='checked'# } # />
        # var ItemCheckboxLabelClass = "k-checkbox-label" #
        # if (item.items) { ItemCheckboxLabelClass = "k-checkbox-label expandable-item" } #
        <label class="#: ItemCheckboxLabelClass #" for=#: item.id # />
    </span>
`;

var canExpandCollapse = true;

$('#side-bar-panel').kendoPanelBar({
  template: panelBarTemplate,
  dataSource: [{
    text: 'Main 1',
    id: 'Main1',
    isVisible: true,
    expanded: true,
    items: [{
      text: 'Sub 1',
      id: 'Sub1',
      isVisible: true
    }, {
      text: 'Sub 2',
      id: 'Sub2',
      isVisible: false
    }]
  }],
  dataBound: function() {
    $('.expandable-item').click(function() {
      canExpandCollapse = false;
    });
  },
  expand: cancelExpandCollapse,
  collapse: cancelExpandCollapse
});

function cancelExpandCollapse(e) {
  if (!canExpandCollapse) {
    e.preventDefault();
    canExpandCollapse = true;
  }
}

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<ul id="side-bar-panel">
</ul>

ここでチェックボックスをクリックしたときに展開と折りたたみを防ぐための解決策を見つけましたhttps://stackoverflow.com/a/31879672/4708150、ただし、展開と折りたたみが無効になっているにもかかわらず、チェックボックスはまだ切り替えられていません。