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

Apart from the duplicate `id` issue (refer BenG's answer), your code means you cannot bind to your model when your submit the form - refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) and once you get that working, your `@Html.CheckBox("EmailAddress")` will **always** post back false — , Apr 29 '16 at 10:47
Why did you delete all the code in your question? (I have rolled back the changes) — , May 03 '16 at 12:55

score 3 · Answer 1 · answered Apr 29 '16 at 09:43

3

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);

answered Apr 29 '16 at 09:43

BenG

14,826
5
45
60

Jquery disable to affect all items in model if textbox empty

1 Answers1