如果文本框为空，则Jquery禁用以影响模型中的所有项目

Question

所以我的代码如下。如果IsShortlisted和DateManagerNotified字段中的一个或其中一个为空，我需要停用DateManagerReplied编辑器。这当前有效，但它只影响模型列表中的第一次迭代。

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

我的Jquery是

$("#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");
        }
    })

正如您所看到的，我使用span来禁用isshortlisted选项列表。这只影响页面上的第一个。

欢呼任何帮助

Answer 1

id必须是唯一的。

将id中的所有foreach更改为类，然后使用： -

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