How to deal with checkboxes in html page? - html

Question

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.

Answer 1

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.