---
title: "Enabling And Disabling Form Element using JQuery"  
description: "In this blog, I’m explaining how to enable or disable a form element using jquery.  In this blog, I will create a simple webform and have two fieldset"  
author: "Sumit Kesarwani"  
published: 2014-03-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/653/enabling-and-disabling-form-element-using-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# Enabling And Disabling Form Element using JQuery

In this blog, I’m explaining how to enable or disable a form [element using jquery](https://www.mindstick.com/forum/158691/how-can-you-change-the-css-styles-of-an-element-using-jquery).\

In this blog, I will create a simple webform and have two fieldsets having two textbox in each fieldset and a check box in the second one – if we check on [checkbox](https://www.mindstick.com/articles/291/how-should-use-checkbox-control-in-vb-dot-net) the second fieldsets [textboxes](https://www.mindstick.com/forum/34206/how-to-add-5-dynamic-textboxes-in-wpf-and-how-to-write-binding-in-c-sharp) will be disabled and the value of first fieldsets textboxes will be copied to second fieldsets textboxes and if we uncheck it, then the value of second fieldsets will be removed.

##### Step 1:

First create an empty [asp.net application](https://www.mindstick.com/forum/540/using-stored-procedures-with-entity-framework-in-an-asp-dot-net-application) and add a webform to it and create a [user interface](https://www.mindstick.com/interview/22909/user-interface-objects-in-cocoa) like this:

\
![Enabling And Disabling Form Element using JQuery](https://www.mindstick.com/blogs/781d355a-9fc2-409f-bdbf-bf735c834205/images/c156b62b-82b5-48b7-8687-bbf04b5beedb.png)

```
<form id="form1" runat="server">        <div>            <fieldset id="shippingInfo" style="width: 100px;">                <legend>Shipping Address</legend>                <label for="shipName">Name</label>                <input name="shipName" id="shipName" type="text" />                <label for="shipAddress">Address</label>                <input name="shipAddress" id="shipAddress" type="text" />            </fieldset>            <fieldset id="billingInfo" style="width: 100px;">                <legend>Billing Address</legend>                <label for="sameAsShipping">Same as Shipping</label>                <input name="sameAsShipping" id="sameAsShipping" type="checkbox"                    value="sameAsShipping" />                <label for="billName">Name</label>                <input name="billName" id="billName" type="text" />                <label for="billAddress">Address</label>                <input name="billAddress" id="billAddress" type="text" />            </fieldset>        </div>    </form>
```

##### Step 2:

Add the jquery-1.11.0.min.js file to [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) and write the below code in the head section of the webform:

```
<script src="jquery-1.11.0.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $('#sameAsShipping').change(function () {                if (this.checked) {                    $('#billingInfo input:text').attr('disabled', 'disabled');// disabled the textboxes                    var shipName = $('#shipName').val();                    $('#billName').val(shipName); // Copy the value from one textbox to another                    var shipAddress = $('#shipAddress').val();                    $('#billAddress').val(shipAddress);                }                else {                    $('#billingInfo input:text').removeAttr('disabled');// Enabled the textboxes                    $('#billName').val("");                    $('#billAddress').val("");                }            }).trigger('change');        });    </script>
```

##### Output

Now when you run the application:

\
![Enabling And Disabling Form Element using JQuery](https://www.mindstick.com/blogs/781d355a-9fc2-409f-bdbf-bf735c834205/images/c156b62b-82b5-48b7-8687-bbf04b5beedb.png)

Write the appropriate values in the textboxes and check on “Same as Shipping” checkbox – both the textbox of Billing Address will be disabled and values from the Shipping Address textboxes will be copied to the Billing Address textboxes and if you uncheck the checkbox:-

\
![Enabling And Disabling Form Element using JQuery](https://www.mindstick.com/blogs/781d355a-9fc2-409f-bdbf-bf735c834205/images/be7b8615-891d-4132-899d-ccd8f3383873.png)

\

![Enabling And Disabling Form Element using JQuery](https://www.mindstick.com/blogs/781d355a-9fc2-409f-bdbf-bf735c834205/images/3584b5b8-3316-4910-90ea-5f15ccf78f1d.png)

If you uncheck the checkbox – values from the textboxes will be removed and become enable to write.

---

Original Source: https://www.mindstick.com/blog/653/enabling-and-disabling-form-element-using-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.