Home > DeveloperSection > Blogs > Enabling And Disabling Form Element using JQuery

Enabling And Disabling Form Element using JQuery


JQuery JQuery 
Ratings:
0 Comment(s)
 4391  View(s)
Rate this:

Enabling And Disabling Form Element using JQuery

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 fieldsets having two textbox in each fieldset and a check box in the second one – if we check on checkbox the second fieldsets textboxes 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 and add a webform to it and create a user interface like this:


<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 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:


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:-



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


Don't want to miss updates? Please click the below button!

Follow MindStick