复选框无法选中/取消选中选项卡

Question

我正在尝试在左侧的选项卡面板中放置一个复选框。但是该复选框无法选中或取消选中。谁能帮我解决这个问题？这是我的代码以及我要执行的操作的图像。

<aside class="sm-side">
<div role="tabpanel">
    <ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
      <li role="presentation" class="brand-nav active" >
        <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">
           <input type="checkbox" id="eq1" >
           <label for="eq1">Resource 1</label>
        </a>
      </li>
      <li role="presentation" class="brand-nav"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Resource 2</a></li>
      <li role="presentation" class="brand-nav"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Resource 3</a></li>
      <li role="presentation" class="brand-nav"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Resource 4</a></li>
     </ul>
</div>
</aside>
<aside>
  <div role="tabpanel" class="tab-pane active" id="tab1">
    <p>Hello1</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab2">
      <p>Hello 2</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab3">
       <p>Hello 3</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab4">
       <p>Hello 4</p>
  </div>
</aside>

Image of what I am trying to do