sorting doesn't work when there is checkbox

This is my table with sortable class

<table class="table table-hover table-bordered sortable">
    <thead>
        <tr>
            <th id="thead_c1" class="text-center">
                <input type="checkbox" id="SearchResult_ChkAll_ALL" name="SearchResult_ChkAll" value="ALL" class="i-checks" /> 
            </th>                                                            
            <th id="thead_c5"><a class="sortHeader"><font id="thead_c5_name">Event Name</font></a></th>
            <th id="thead_c4"><a class="sortHeader"><font id="thead_c4_name">Start</font></a></th>
            <th id="thead_c4"><a class="sortHeader"><font id="thead_c4_name">End</font></a></th>
            <th id="thead_c5"><a class="sortHeader"><font id="thead_c5_name">Venue</font></a></th>
            <th id="thead_c5"><a class="sortHeader"><font id="thead_c5_name">Organizer</font></a></th>                                                            
            <th id="thead_c5"><a class="sortHeader"><font id="thead_c5_name">Participants</font></a></th>
            <th id="thead_c2"><a class="sortHeader"><font id="thead_c2_name">Course</font></a></th>
            <th id="thead_c3"><a class="sortHeader"><font id="thead_c3_name">Module</font></a></th>
            <th id="thead_c4"><a class="sortHeader"><font id="thead_c4_name">Topic</font></a></th>
            <th id="thead_c5"><a class="sortHeader"><font id="thead_c5_name">Details</font></a></th>                                                           
        </tr>
    </thead>
    <tbody id="SearchResult_Tbody">
        <%
            List<Event> eventList = (List<Event>) request.getAttribute("eventList");                                                        
            for (int i =0; i < eventList.size(); i++) {
        %>                                             
            <tr id="CurResultRow<%= i + 1%>">
                <td id="tbody_r<%= i + 1%>c1" class="text-center">
                    <div id="ResultFrom_ChkInner<%= i + 1%>">

                    </div>

                //here is where the checkbox need to be put

                </td>
                <td class="sortBody"><a href="<%=request.getContextPath()%>/eventNew.imu?eventid=<%= eventList.get(i).getId()%>" ><%= eventList.get(i).getTitle() %></a></td>
                <td class="sortBody"><%= eventList.get(i).getEvent_from() %></td>
                <td class="sortBody"><%= eventList.get(i).getEvent_end() %></td>
                <td class="sortBody"><%= eventList.get(i).getVenue() %></td>
                <td class="sortBody"><%= eventList.get(i).getPic_user() %></td>                                                             
                <td class="sortBody"><%= eventList.get(i).getParticipantCount() %></td>
                <td class="sortBody"><%= eventList.get(i).getCourse_name().equalsIgnoreCase("") ? "-" : eventList.get(i).getCourse_name() %></td>
                <td class="sortBody"><%= eventList.get(i).getModule_name().equalsIgnoreCase("") ? "-" : eventList.get(i).getModule_name() %></td>
                <td class="sortBody"><%= eventList.get(i).getTopic_name().equalsIgnoreCase("") ? "-" : eventList.get(i).getTopic_name() %></td>
                <td class="sortBody"><button type="button" id="detail_<%= i %>" onclick="gotoDetail(<%= eventList.get(i).getId() %>)"><i class="glyphicon glyphicon-file" style="margin-bottom: 5px;"></i></button></td>
            </tr>
        <%
            }
        %>
    </tbody>
</table>

When I remove the checkbox, It can be sorted. Does anyone know how to solve it?

<div id="ResultFrom_ChkInner<%= i + 1%>">
  <input type="checkbox" class="i-checks" id="SearchResult_ChkBox_<%= i + 1%>" name="SearchResult_ChkBox"  value="<%= i %>" />
</div>

This is the checkbox that I'm supposed to include