Why is this Javascript disabling only nested view forms?

We have a C# application where I am using nested views to display user form data. I want to disable the nested form and keep another form on the page enabled. Everything is working as intended but I don't understand why.

The nested view - to be disabled. @Html.Partial("~/Views/Folder/TheView.cshtml", Model)

The on page form - to keep enabled. @using (Html.BeginForm("Modify", "Controller", FormMethod.Post))

The script disabling document.addEventListener('DOMContentLoaded', function () { $("#Form *").prop("disabled", true); });

All of the checkboxes/textboxes on "TheView.cshtml" are disabled, however my on page form is not. I can't figure out why this is not disabling all DOM form elements and only those in the nested views and I can't find information on what $("#Form *") is retrieving and why. Any help is much appreciated.


  • Your selector is not selecting your "Form"; you are actually selecting any element with an id of 'Form'.

    So you would select this:

    <div id="Form">Some Content</div>

    but not this:

    <form>form content in here</form>