separating onclick on elements generated on foreach loop asp.net mvc

Question

I am trying to make an application where ppl can give in watches for repair. Each order can have multiple repairs needed to be done on the watch (battery, band.. etc.).

In the details view of the order I generate all repairs through a foreach loop with a checkbox appearing next to each repair to mark the repair as done and then the status is updated and I hide the checkbox through jquery.

The problem is that when I click any checkbox only the first repair that is generated from foreach is marked as done in the database but all the checkboxes are hidden.

Here is the view..

h2>Details</h2>
<div>
<span>@Model.Customer.GetName()</span><br/>
<span>@Model.Customer.Landine</span><br/>
<span>Ticket Id: @Model.Id</span>
</div>
<div>
@foreach (var repair in Model.Repairs)
{ 
    <div style="border-bottom: black">
        <span>@repair.RepairType.Name</span><br />
     <span> Repair Status: <span class="status">@(repair.IsDone ? "Done" : "Processing")</span></span>
        @if (!repair.IsDone)
        {
            <span><input type="checkbox" class="status-checkbox" data-repair-
            id="@repair.Id" />Mark as done</span><br />
        }

        <span>Location: @Model.Location.Name</span>
    </div>

}
</div>

and here is my jQuery..

@section Scripts{
<script>
    $(document).ready(function() {
        $('span .status-checkbox').on("click",
            function () {

                var checkBox = $("span .status-checkbox");
                var status = checkBox.is(":checked");
                var data = {
                    id: checkBox.attr("data-repair-id"),
                    isChecked: status

                };
                $.ajax({
                    url: '/Repairs/UpdateStatus',
                    type: 'POST',
                    data: data,
                    dataType: 'html',
                    success: function (data) {
                        $("span .status").html(data);
                        checkBox.hide();
                    },
                    error: function() {
                        alert("Problem updating repair status");
                    }
                });

            });
    });
</script>
}

and here is the controller code..

  [HttpPost]
    public async Task<ActionResult> UpdateStatus(int id, bool isChecked)
     {
        var repair = await _context.Repairs.FindAsync(id);
        if (repair != null)
        {
            repair.IsDone = isChecked;
        }
        await _context.SaveChangesAsync();

        return Content("Done");

     }

Answer 1

Change you view to add id props to like below:

@foreach (var repair in Model.Repairs)
{ 
    <div style="border-bottom: black">
    <span>@repair.RepairType.Name</span><br />
   <span> Repair Status: <span id="sp_@repair.Id" class="status">@(repair.IsDone ? "Done" : "Processing")</span></span>
    @if (!repair.IsDone)
    {
        <span><input type="checkbox" class="status-checkbox" data-repair-
        id="@repair.Id" />Mark as done</span><br />
    }

    <span>Location: @Model.Location.Name</span>
  </div>

}

And then in your script:

<script>
$(document).ready(function() {
    $('span .status-checkbox').on("click",
        function () {

            var checkBox = $(this);
            var status = checkBox.is(":checked");
            var repairId = checkbox.data('repair-id');
            var data = {
                id: checkBox.attr("data-repair-id"),
                isChecked: status

            };
            $.ajax({
                url: '/Repairs/UpdateStatus',
                type: 'POST',
                data: data,
                dataType: 'html',
                success: function (data) {
                    $("#sp_"+repairId).html(data);
                    checkBox.hide();
                },
                error: function() {
                    alert("Problem updating repair status");
                }
            });

        });
});
</script>
}

I haven't tested it so you might need to make few changes as needed.