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

Question

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

@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 必须是唯一的。

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

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