Sort html table according to list of checkboxes in table column

In my html table there one column ("IsReserved") is list of Checkboxes some are checked and some not. When user click on IsReserved header than table is sorted by it. Means on first click in asc order and on second click desc order. I want this problem is done by usig javascript or jquery and if any other then please.

In short i want to sort table according checkboxes in "IsReserved" column Thanks.

 <tbody data-bind="foreach: ProductViewList">
                            <tr>
                                <td class="calign leftbordernone" style="width:50px">
                                    <a data-bind="attr: { 'href': '@Url.Action("EditProduct", "Inventory")?id=' + Id}" title="Edit Product">
                                        <img src="~/Images/edit.png" height="15" width="15" alt="" />
                                    </a>
                                </td>
                                <td class="calign leftbordernone" style="width:50px">
                                    <a data-bind="click: function () { DeleteProduct(Id); }" href="" title="Delete Product">
                                        <img src="~/Images/delete.png" height="15" width="15" alt="" />
                                    </a>
                                </td>
                                <td class=" lalign leftbordernone" style="width:90px" data-bind="text: ProductCode"></td>
                                <td class=" lalign" data-bind="text: ProductName"></td>
                                <td class=" lalign" style="width:70px" data-bind="text: CategoryName"></td>
                                <td class=" lalign" style="text-align:center;width:40px">
                                    <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked:IsActive" />
                                </td>
                                <td class=" lalign" style="text-align:right" data-bind="text: formatPrice(SalesPrice)"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: QtyperUnit"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: LeadTime"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: CurrentStock"></td>
                                <td class=" lalign" style="text-align:right" data-bind="text: ReorderLevel"></td>
                                <td class=" lalign rightbordernone" style="text-align:center">
                                    <input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked: Reserved" />
                                </td>
                            </tr>
                        </tbody>