Jquery disable to affect all items in model if textbox empty

Question

So my code is below. I need to disable the IsShortlisted editor for if both or one of the DateManagerNotified and DateManagerReplied fields are blank. This currently works but it only affects the first iteration in the model list.

@model IEnumerable<Recruitment.Model.VacancyApplicant>
    @{
        ViewBag.Title = "Shortlistings";
    }

<h2>Unprocessed Applicants for @Html.ActionLink(@Model.First().Vacancy.JobRef, "Details", "Vacancy", new { id = Model.First().VacancyId }, null)</h2>

@using (Html.BeginForm("Shortlist", "VacancyApplicant", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <table class="table table-striped table-hover table-responsive">
        <thead>
            <tr>
                <th>
                    @Html.ActionLink("First Name", "Shortlist", new { sort = ViewBag.FirstNameSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Last Name", "Shortlist", new { sort = ViewBag.LastNameSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Date Received", "Shortlist", new { sort = ViewBag.DateReceivedSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Date Manager Notified", "Shortlist", new { sort = ViewBag.DateManagerNotifiedSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Date Manager Replied", "Shortlist", new { sort = ViewBag.DateManagerRepliedSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Shortlisted?", "Shortlist", new { sort = ViewBag.IsShortlistedSort, vacancyId = Model.First().VacancyId })
                </th>
                <th>
                    @Html.ActionLink("Email?", "Shortlist", new { sort = ViewBag.EmailSort, vacancyId = Model.First().VacancyId })
                </th>
            </tr>
        </thead>    
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.TextBoxFor(modelItem => item.Applicant.FirstName, new { @class = "form-control", disabled = "disabled" })
                    </td>
                    <td>
                        @Html.TextBoxFor(modelItem => item.Applicant.LastName, new { @class = "form-control", disabled = "disabled" })
                    </td>
                    <td>
                        @Html.TextBoxFor(modelItem => item.DateReceived, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
                    </td>
                    <td>
                        <span id="datenotified">
                            <div class="input-group">
                                @Html.EditorFor(modelItem => item.DateManagerNotified, new { htmlAttributes = new { @class = "form-control date-picker", placeholder = "Datepicker..." }, })
                                <label class="input-group-addon btn">
                                    <span class="fa fa-calendar"></span>
                                </label>
                            </div>
                        </span>
                    </td>
                    <td>
                        <span id="datereplied">
                            <div class="input-group">
                                @Html.EditorFor(modelItem => item.DateManagerReplied, new { htmlAttributes = new { @class = "form-control date-picker", placeholder = "Datepicker..." }, })
                                <label class="input-group-addon btn">
                                    <span class="fa fa-calendar"></span>
                                </label>
                            </div>
                        </span>
                    </td>
                    <td>
                        <span id="shortlisted">
                                @Html.EditorFor(modelItem => item.IsShortlisted, "NullBool")
                        </span>
                    </td>
                    <td>
                        @if (string.IsNullOrEmpty(item.Applicant.EmailAddress))
                        {
                            @Html.CheckBox("EmailAddress", false, new { @class = "form-control", @disabled = "disabled" });
                        }
                        else
                        {
                            @Html.CheckBox("EmailAddress", true, new { @class = "form-control", @disabled = "disabled" });
                        }
                    </td>
                    </tr>
            }
        </tbody>
    </table>    

    <div class="center-block form-group">
        <div class="text-center">
            <div class="button-container">
                <input type="submit" name="PrintRegret" value="Print Regret" class="btn btn-danger" />
                <input type="submit" name="Save" value="Save" class="btn btn-primary" />
                <input type="submit" name="EmailRegret" value="Email Regret" class="btn btn-danger" />
            </div>
            <br />
            @Html.ActionLink("Print Applicants for Shortlisting", "PrintApplicantsForShortlisting", "VacancyApplicant", new { VacancyId = Model.First().Vacancy.VacancyId }, new { @class = "btn btn-success" })
            @Html.ActionLink("Email Applicants for Shortlisting", "EmailApplicantsForShortlisting", "VacancyApplicant", new { VacancyId = Model.First().Vacancy.VacancyId }, new { @class = "btn btn-success" })
            <br /><br />
            @Html.ActionLink("Shortlist By File", "AutoShortlist", "Interview", new { vacancyId = Model.First().Vacancy.VacancyId }, null)<br />
            @Html.ActionLink("Interviews", "InterviewsByVacancy", "Interview", new { VacancyId = Model.First().Vacancy.VacancyId }, null)
        </div>
    </div>
}

My Jquery is

$("#datereplied :input").on("change", function() {
        if ($(this).val() != "") {
            console.log("replied not disabled");
            $("#shortlisted :input").prop("disabled", false);
        } else {
            console.log("replied disabled");
            $("#shortlisted :input").prop("disabled", "disabled");
        }
    })

    $("#datenotified :input").on("change", function () {
        if ($(this).val() != "") {
            console.log("notified not disabled");
            $("#shortlisted :input").prop("disabled", false);
        } else {
            console.log("notified disabled");
            $("#shortlisted :input").prop("disabled", "disabled");
        }
    })

As you can see I'm using span to disable the isshortlisted option list. This only ever affects the first one on the page.

cheers for any help

Answer 1

an id must be unique.

Change all the id's in the foreach to classes, then use:-

$(this).closest('tr').find(".shortlisted :input").prop("disabled", false);