icheck-primary is not working in Table

[DrXSsive]

Hey Guys,

I recently started using icheck but got into problem, it is not working with bootstrap table. I am using Asp.Net 5 framework. Here is my code:

<table class="table table-bordered table-hover" style="border-top: 1px solid #dee2e6 !important">
    <thead>
        <tr>
            <th width="50%">Permissions</th>
            <th width="25%">Read</th>
            <th width="25%">ReadAndWrite</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Admin User</td>
            <td>
                <div class="icheck-primary">
                    <input asp-for="Admin_User_Read">
                    <label class="form-check-label"></label>
                </div>
            </td>
            <td>
                <div class="icheck-primary">
                    <input asp-for="Admin_User_ReadAndWrite">
                    <label class="form-check-label"></label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Here is the output:

The issue I am facing is, I am unable to toggle the check box inside the table or unable to click.

Any help would be appriciated.

Regards
D

[rozium]

I think you need to make sure each input and label has its own id and for attribute

<td>
    <div class="icheck-primary">
        <input id="1" asp-for="Admin_User_Read">
        <label for="1" class="form-check-label"></label>
    </div>
</td>
<td>
    <div class="icheck-primary">
        <input id="2" asp-for="Admin_User_ReadAndWrite">
        <label for="2" class="form-check-label"></label>
    </div>
</td>