如何将JavaScript绑定到在MVC5视图中创建的表内的复选框和datetimepicker

Question

Basically,

I have a table created in MVC view.

Each row has a checkbox and a datetime HTML input control associated with the part order. I'd like to automatically set datetime picker to today's date if checkbox is selected. I know how to do it if my checkbox and datetime have a predefined IDs (see jquery script below), but in this case, I don't know ahead of time how many rows I will have ahead of time. I'm somewhat stuck on trying to figure an easiest way to setup unique IDs and subsequently read them from the javascript.

Here is the snippet of my code from the MVC View:

<tbody>
@foreach (var partOrder in Model.PartOrders)
 {
  <tr>
   <td>@Html.DisplayFor(m => partOrder.Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td class="text-center">@Html.EditorFor(m => partOrder.IsPartReceived, new {htmlAttributes = new { @class = "checkbox isPartReceived" } })</td>
   <td class="text-center">@Html.DisplayFor(m => partOrder.OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
   <td>@Html.EditorFor(m => partOrder.ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn"} })</td>
 </tr>
}
</tbody>

The first @Html.EditorFor is generating the checkbox, and the second one is the datetime picker.

Here is the example of jquery that I use elsewhere on the page to do something similar:

            $("#IsBoxRequested").click(function () {
                var checkBox = $("#IsBoxRequested");
                var timeBox = $("#BoxRequestedOn");
                setTime(checkBox, timeBox);
            });


    function setTime(checkbox, timebox) {
        if (checkbox.prop('checked') == true) {
            timebox.val(getToday());
        }
        else {
            timebox.val(null);
        }
    }
    function getToday() {
        var now = new Date();
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        return today = now.getFullYear() + "-" + (month) + "-" + (day);
    }

Any tips on how I can this trick on dynamically created checkbox inputs are greatly appreciated.

Answer 1

Many thanks again to @StephenMuecke I have solved my issue.

First, I switched to for loop as shown below:

            <tbody>
                @for (int i = 0; i < Model.PartOrders.Count(); i++)
                {
                    @Html.HiddenFor(m=>m.OrderedPartIDs[i])
                    <tr>
                        <td>@Html.DisplayFor(m => m.PartOrders[i].Part.Description, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td class="text-center"><label style="display:block">@Html.EditorFor(m => m.PartOrders[i].IsPartReceived, new { htmlAttributes = new { @class = "checkbox isPartReceived" } })</label></td>
                        <td class="text-center">@Html.DisplayFor(m => m.PartOrders[i].OrderedOn, new { htmlAttributes = new { @class = "form-control" } })</td>
                        <td>@Html.EditorFor(m => m.PartOrders[i].ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn" } })</td>
                    </tr>
                }
            </tbody>

Second, I've updated javascript to simple:

            $(".isPartReceived").click(function () {
                var timeBox = $(this).closest('tr').find('.partReceivedOn');
                setTime($(this), timeBox);

            });

Everything works like a charm now!