Toggling Bootstrap Menu with a Checkbox instead of an Anchor in React

I'm using bootstrap and react to make a sidebar.

Right now each item on the sidebar has a checkbox. Here's the following offending code:

    <div className="list-group panel">
      <a href="#demo3" data-toggle="collapse" data-parent="#MainMenu" onClick={this.checkAll} ><input type="checkbox" checked={this.state.All} /> All</a>
      <div className="collapse" id="demo3">
        <a href="#SubMenu1" data-toggle="collapse" data-parent="#SubMenu1" >  <input type="checkbox" checked={this.state.SubMenu1} onClick={this.checkSubMenu1}/> SubMenu1 <i className="fa fa-caret-down"></i></a>
        <div className="collapse list-group-submenu" id="SubMenu1">
          <a href="#SubMenu2" data-toggle="collapse" data-parent="#SubMenu2"> <input type="checkbox"/> Sub Menu 2 <i className="fa fa-caret-down"></i></a>
          <div className="collapse list-group-submenu" id="SubMenu2">
            <a href="#"  data-parent="#SubMenu2"><input type="checkbox"/> Item 1</a>
            <a href="#" data-parent="#SubMenu2" ><input type="checkbox"/> Item 2</a>
          </div>
        </div>
      </div>

When a user clicks the checkbox and if the checkbox is true, the list is suppose to be toggled to drop down. My problem is the list toggles down only when the tag is click, rather than the checkbox. Would it be possible to toggle this sidebar with a checklist as opposed to them clicking the href link?