Selecting a check box when another checkbox is selected within a table row

[MattNorman]

I have a data table where the rows are created from a list passed to the view in the model.

Each row has a checkbox for 'View', 'Add' and 'Edit'.

If the 'Add' or 'Edit' checkboxes are selected then I would like to have the 'View' checkbox selected as it is a dependent permission.

I can do this easily server side in the post action however I would like to make it visual that this is happening.

Can anyone point me in the right direction?

<tbody>
    @for (int i = 0; i < Model.WalletPermissions.Count; i++)
    {
        <tr id="@Model.WalletPermissions[i].WalletId">
            <td class="text-center">@Model.WalletPermissions[i].WalletId</td>
            <td>@Model.WalletPermissions[i].WalletName</td>
            <td class="text-center">
                <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].View)<span></span></label>
            </td>
            <td class="text-center">
                <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].AddAccounts)<span></span></label>
            </td>
            <td class="text-center">
                <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].EditAccounts)<span></span></label>
            </td>
            <td class="text-center">
                <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].DeleteAccounts)<span></span></label>
            </td>
        </tr>
    }
</tbody>

 

[MattNorman]

Managed to figure this out and it was surprisingly straight forward.

Here are the checkboxes that have an onclick event calling a javascript function:

<tbody>
                            @for (int i = 0; i < Model.WalletPermissions.Count; i++)
                            {
                                <tr id="@Model.WalletPermissions[i].WalletId">
                                    <td class="text-center">@Model.WalletPermissions[i].WalletId</td>
                                    <td>@Model.WalletPermissions[i].WalletName</td>
                                    <td class="text-center">
                                        <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].View)<span></span></label>
                                    </td>
                                    <td class="text-center">
                                        <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].AddAccounts, new { @onclick = "CheckBox(WalletPermissions_" + i + "__View)" })<span></span></label>
                                    </td>
                                    <td class="text-center">
                                        <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].EditAccounts, new { @onclick = "CheckBox(WalletPermissions_" + i + "__View)" })<span></span></label>
                                    </td>
                                    <td class="text-center">
                                        <label class="ckbox d-inline-block">@Html.CheckBoxFor(x => x.WalletPermissions[i].DeleteAccounts, new { @onclick = "CheckBox(WalletPermissions_" + i + "__View)" })<span></span></label>
                                    </td>
                                </tr>
                            }
                        </tbody>

I just had to inspect the the checkbox elements in the view to see how it was generating the element ID's and then construct the ID using the value of 'i' from the loop.

Here is the javascript function:

<script>
    function CheckBox(id)
    {
        $(id).prop('checked', true);       
    }
</script>