Jquery Enable/Disable Form With Checkbox

Question

I swear I looked here and googled every different way I could ask the question but none of the answers solve my simple problem.

I have a billing form and a shipping form on the same page.

When you check the checkbox in the billing form, it disables the shipping form and enables it once the checkbox is unchecked.

I got this to work but once I uncheck it and check the box the second time, the disable property (.prop) is not added although the addClass('disabled') is.

Thanks for your help with this.

Here is my HTML code:

<div class="col_4">
    <fieldset>
        <legend>Billing Information</legend>

        <p>
            <input type="checkbox" id="sameasbilling">Ship to Same As Billing Address</input>
        </p>


        <label for="bfname">First Name</label>
        <input type="text" id="bfname" class="required" name="fname" minlength="2" />
        <label for="blname">Last Name</label>
        <input type="text" id="blname" class="required" name="lname" minlength="2" />
        <label for="baddress">Address</label>
        <input type="text" id="baddress" class="required" name="address" minlength="2" />
        <label for="baddress2">Suite/Apt #</label>
        <input type="text" id="baddress2" name="address2" />
        <label for="bcity">City</label>
        <input type="text" id="bcity" name="city" />
        <label for="bstate">State</label>
        <input type="text" id="bstate" name="state" minlength="2" />
        <label for="bzip">Zip</label>
        <input type="text" id="bzip" class="required" name="zip" minlength="5" />
    </fieldset>
</div>
<div class="col_4" id="shipping">
    <fieldset>
        <legend>Shipping Information</legend>
        <br>
        <br>
        <label for="fname">First Name</label>
        <input type="text" id="fname" class="required" name="fname" minlength="2" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" class="required " name="lname" minlength="2" />
        <label for="address">Address</label>
        <input type="text" id="address" class="required" name="address" minlength="2" />
        <label for="address2">Suite/Apt #</label>
        <input type="text" id="address2" name="address2" />
        <label for="city">City</label>
        <input type="text" id="city" name="city" />
        <label for="state">State</label>
        <input type="text" id="state" name="state" minlength="2" />
        <label for="zip">Zip</label>
        <input type="text" id="zip" class="required" name="zip" minlength="5" />
    </fieldset>
</div>
<div class="right">
    <button class="pop orange">Send the order!</button>
</div>
</form>
</div>

Here is my JQuery:

<script>
$(document).ready(function () {
    $('#sameasbilling').change(function () {
        if ($('#sameasbilling').is(':checked')) {
            $('#shipping :input').addClass('disabled').prop('disabled', true);
            console.log('checked');
        } else {
            $('#shipping :input').removeClass('disabled').removeProp('disabled');
            console.log('unchecked');
        }
    });
})
</script>

Not sure what you mean @mareckmareck. prop adds the disabled property to each input, not the class. — Gio
– Gio, Commented Apr 16, 2014 at 13:19

Manwal · Accepted Answer · 2014-04-16 13:22:15Z

1

Try prop('disabled',false);

try this is following working code:

$(document).ready(function () {
    $('#sameasbilling').click(function () {
        if ($('#sameasbilling').is(':checked')) {
            $('#shipping input').addClass('disabled').prop('disabled', true);
            console.log('checked');
        } else {
            $('#shipping input').removeClass('disabled').prop('disabled', false);
            console.log('unchecked');
        }
    });
})

Fiddle

answered Apr 16, 2014 at 13:22

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manwal Over a year ago

@mareckmareck your fiddle is same as mine.

Gio Over a year ago

Thanks @Manwal I tried adding false but I was using removeProp...I see that was my problem. No need to removeProp, just set it to false. Awesome, works perfectly thanks again.

Collectives™ on Stack Overflow

Jquery Enable/Disable Form With Checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related