如何处理 html 页面中的复选框？

Question

我想将输出作为单行输出，如组名和可见与否。但在我的场景中，我得到了不同的输出。 enter image description here

这是我的 html 代码。

@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>

我要求一行中的每个组都有一个复选框。任何机构都可以指导我如何在通过 2 个 foreach 语句的代码中处理两个集合。但毕竟还是不能乱逻辑。

Answer 1

如下更新您的 foreach 代码，即

    @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>
        }

    }

希望这能解决您的问题。