Asp.Net Core 6 : Disable All Controls Inside a Form/Page Using jQuery

In this article i will show you how you can disable all the controls by using only single line jquery code to disable all the controls present in your form or page. In this i have used html helper control and disabled it by using jQuery.

Now here is the code which is used for showing control on page. 

@{     ViewData["Title"] = "Home Page";  } @using (Html.BeginForm("", "", FormMethod.Post, new { @id = "formcontrol" })) {     <div class="text-center">         <h1 class="display-4">Welcome</h1>         <p>@Html.TextArea("TextAreaControl", "", new { @class = "form-control" })</p>         <p>@Html.TextBox("TextBoxControl", "", new { @class = "form-control" })</p>         <p>@Html.Password("PasswordControl", "", new { @class = "form-control" })</p>         <p>@Html.CheckBox("CheckBoxControl", false, new { @class = "form-control" })</p>         <p>@Html.RadioButton("RadioButtonControl", false, new { @class = "form-control" })</p>         <p><input type="submit" value="Submit" class="btn-danger" /></p>     </div> }

 

When we execute the code we will get the screen output as shown below in enable mode.    

Now we will write code to disable all the above control shown.  so here is the code 

<script>      $(document).ready(function () {           $("#formcontrol :input").attr("disabled", true);       }); </script>

 

In above code don't forgot to change the form id with your form control id. Now lets run the code and check the output. So here you can see i have used only one line of code to disable all the controls. As i have used from control id all the input control to make it disable.  Now here is the complete code.

@{     ViewData["Title"] = "Home Page"; } @using (Html.BeginForm("", "", FormMethod.Post, new { @id = "formcontrol" })) {     <div class="text-center">         <h1 class="display-4">Welcome</h1>         @Html.TextArea("TextAreaControl", "", new { @class = "form-control form-control-sm" })<br />         @Html.TextBox("TextBoxControl", "", new { @class = "form-control  form-control-sm" })<br />         @Html.Password("PasswordControl", "", new { @class = "form-control form-control-sm" })<br />         @Html.CheckBox("CheckBoxControl", false, new { @class = "form-control form-control-sm" })<br />         @Html.RadioButton("RadioButtonControl", false, new { @class = "form-control form-control-sm" })         <p><input type="submit" value="Submit" class="btn-danger" /></p>     </div> } <script src="~/lib/jquery/dist/jquery.min.js"></script> <script>     $(document).ready(function () {         $("#formcontrol :input").attr("disabled", true);     }); </script>

 

Now run the code and check the output.

Download