JQuery Forms Enable Disable Form Elements

From CoderLearner
Jump to: navigation, search

Description

You want to disable or enable the form element based on the user input. For example, when user home address and the current address are the same, you want to make the option for the user to check to indicate both address are the same.

Example 1

<!DOCTYPE html>
<html>
    <head>
        <title>Enable Disable</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $().ready(function() {
                $('input[name=ch_same]').change(function() {
                    var $home_chk = $('#home_address input:text');
                    if (this.checked) {
                        $home_chk.attr('disabled', 'disabled');
                    }
                    else {
                        $home_chk.removeAttr('disabled');
                    }
                }).trigger('change');
            });
        </script>
    </head>
    <body>
        <h3>Register</h3>
        <form action="#" method="post" name="frm-test">

            <fieldset id="current_address">
                <legend>Current Address</legend>
                <label for="ca_city">City</label>
                <input type="text" id="ca_city" name="ca_city"/>
                <label for="ca_country">Country</label>
                <input type="text" id="ca_country" name="ca_country"/>
            </fieldset>
            <label for="ch_same">Current and Home Address are the same</label>
            <input type="checkbox" name="ch_same" id="ch_same" value="The Same"/>
            <fieldset id="home_address">
                <legend>Home Address</legend>
                <label for="ha_city">City</label>
                <input type="text" id="ha_city" name="ha_city"/>

                <label for="ca_country">Country</label>
                <input type="text" id="ha_country" name="ha_country"/>
            </fieldset>

            <input type="submit" name="btn_SAVE" value="Save"/>

        </form>
    </body>
</html>

Example 2

<!DOCTYPE html>
<html>
    <head>
        <title>Focus</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $().ready(function() {
                $('input[name=ch_same]').change(function() {
                    var $home_chk = $('#home_address input:text');
                    if (this.checked) {
                        $home_chk.attr('disabled', 'disabled').each(function(i) {
                            var $tmp_value = $('#current_address input:text:eq(' + i + ')').val();
                            $(this).val($tmp_value);
                        });
                    }
                    else {
                        $home_chk.removeAttr('disabled');
                    }
                }).trigger('change');
            });
        </script>
    </head>
    <body>
        <h3>Register</h3>
        <form action="#" method="post" name="frm-test">

            <fieldset id="current_address">
                <legend>Current Address</legend>
                <label for="ca_city">City</label>
                <input type="text" id="ca_city" name="ca_city"/>
                <label for="ca_country">Country</label>
                <input type="text" id="ca_country" name="ca_country"/>
            </fieldset>
            <label for="ch_same">Current and Home Address are the same</label>
            <input type="checkbox" name="ch_same" id="ch_same" value="The Same"/>
            <fieldset id="home_address">
                <legend>Home Address</legend>
                <label for="ha_city">City</label>
                <input type="text" id="ha_city" name="ha_city"/>

                <label for="ca_country">Country</label>
                <input type="text" id="ha_country" name="ha_country"/>
            </fieldset>

            <input type="submit" name="btn_SAVE" value="Save"/>

        </form>
    </body>
</html>