Checkbox cannot check/uncheck in tab

I am trying to put a checkbox in a tab panel on the left side. But the checkbox cannot check or uncheck. Can anyone help me to solve this ? This is my code and the image on what I am trying to do.

<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