How to deal with checkboxes in html page?

Issue

I want to get the output as single row like group name and visible or not. but in my scenario i am getting different output . enter image description here

Here is my html code.

@model List<F3CentricMVCApp.Areas.KnowledgeBox.Models.GroupResponse>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

<div class="col-12">
    <table id="tblSectionGroups" class="table responsive table-striped" bPaginate="true">
        <thead>
            <tr>
                <th width="95%">Groups</th>
                <th width="5%" class="no-sort"></th>
            </tr>
        </thead>
        <tbody>

            @if (@ViewBag.UnAssidnedGroups is not null)
            {
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Name</td>

                        @foreach (var unassinedGroup in ViewBag.UnAssidnedGroups)
                        {

                            @if (@unassinedGroup.GroupId == @item.Id)
                            {
                                <td>
                                    <input type="checkbox" class="chkSectionVisibility" />
                                </td>
                            }
                            else
                            {
                                <td>
                                    <input type="checkbox" class="chkSectionVisibility" checked="checked" />
                                </td>
                            }

                        }

                    </tr>
                }

            }
        </tbody>
    </table>
</div>


<script>
    $('#tblSectionGroups').DataTable({
        "bLengthChange": false,
        "pageLength": 5,
        "bPaginate": true,
        "stripeClasses": [],
        "info": false,
        language: {
            searchPlaceholder: "Type to filter list",
            search: ""
        },
        "order": [],
        "columnDefs": [{
            "targets": 'no-sort',
            "orderable": false,
        }]
    });

</script>


<div class="col-md-12 text-right">
    <button type="button" class="btn btn-custom" tabindex="3" id="btnSave">Save</button>

</div>

Single checkbox for each group in a row is my requirement. any body can guide me how to deal with two collections in a code which is going through 2 foreach statements. but the logic should not be disturbed after all.

Solution

Update your foreach code as below i.e.

    @if (@ViewBag.UnAssidnedGroups is not null)
    {
        @foreach (var item in Model)
        {
            int isUnassigned = 0;

            <tr>
                <td>@item.Name</td>

                @foreach (var unassinedGroup in ViewBag.UnAssidnedGroups)
                {

                    @if (@unassinedGroup.GroupId == @item.Id)
                    {
                        <td>
                            <input type="checkbox" class="chkSectionVisibility"  />
                        </td>

                        // Setting.
                        isUnassigned++;
                    }
                }

                if (isUnassigned <= 0)
                {
                    <td>
                        <input type="checkbox" class="chkSectionVisibility" checked="checked" />
                    </td>
                }
            </tr>
        }

    }

Hopefully this will solve your issue.

Answered By - asmak9