jQuery disable form element when checkbox is checked

Question

I have a complicated jQuery form and I want to disable several form elements if a certain checkbox is checked. I'm using jQuery 1.3.2, and all the relevant plugins. What am I doing wrong here?

Here is my HTML:

    <li id="form-item-15" class="form-item">
        <div class='element-container'>
            <select id="house_year_built" name="house_year_built" class="form-select" >
                 ...Bunch of options...
            </select>
            <input type="text" title="Original Purchase Price" id="house_purchase_price" name="house_purchase_price" class="form-text money" />
            <input type="text" title="Current Home Debt" id="house_current_debt" name="house_current_debt" class="form-text money" />
        </div>
        <span class="element-toggle">
            <input type="checkbox" id="house_toggle" />
            <span>Do not own house</span>
        </span>
    </li>

Here is my jQuery:

$('.element-toggle input').change(function () { 
    if ($(this).is(':checked')) $(this).parents('div.element-container').children('input,select').attr('disabled', true);
    else $(this).parents('div.element-container').children('input,select').removeAttr('disabled'); });

Chadwick · Accepted Answer · 2011-12-16 23:11:27Z

10

just a tidbit: since jquery 1.6 you should not use $(this).attr('checked') which is always true, but rather $(this).prop('checked').

it is also advisable to use $(this).prop('disabled') (to test whether the element is disabled), and $(this).prop('disabled', newState) rather than attr.

edited Dec 16, 2011 at 23:11

Chadwick

12.7k7 gold badges52 silver badges66 bronze badges

answered Dec 16, 2011 at 22:50

anon

3113 silver badges3 bronze badges

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

1 Comment

Andrej Sramko Over a year ago

The if-statement can be also omitted and thus making a one-liner from that inputs.prop('disabled', $(this).prop('checked'));

Jordan Ryan Moore · Accepted Answer · 2009-11-25 19:16:14Z

4

There are a few things that should be changed. First of all, the actual HTML structure doesn't match what you're querying for in JavaScript (specifically the parents() call). Secondly, binding to the click event will provide better support in IE since IE will sometimes wait to fire the change event until after the element loses focus.

$('.element-toggle input').bind('click', function () {
    var inputs = $(this).closest('li.form-item').find('div.element-container').children('input,select');

    if ($(this).attr('checked')) {
        inputs.attr('disabled', true);
    } else {
        inputs.removeAttr('disabled');
    }
});

answered Nov 25, 2009 at 19:16

Jordan Ryan Moore

6,8872 gold badges28 silver badges27 bronze badges

2 Comments

Dakota Over a year ago

Still not working, but looks like it should. Is it possible bind() is flakier than onchange, even if less compatible. I'll keep playing around. Hmm.

Dakota Over a year ago

I ultimately eliminated the element-container class since it wasn't behaving for me and went with: $('.element-toggle input').bind('click', function () { var inputs = $(this).closest('li.form-item').find('input,select'); if ($(this).attr('checked')) inputs.attr('disabled', true); else inputs.removeAttr('disabled'); $(this).removeAttr('disabled'); }); Thanks again, D

Rohit bal · Accepted Answer · 2011-01-30 23:53:45Z

1

That was helpful. If anyone's looking for a plugin, here you go: http://s.technabled.com/jquery-foggle

answered Jan 30, 2011 at 23:53

Rohit bal

191 bronze badge

1 Comment

ftrotter Over a year ago

Works but costs $3 or $15 and is not open source.

Roman · Accepted Answer · 2009-11-25 19:10:10Z

0

<div class='element-container'> is not a parent for $('.element-toggle input') is your example

answered Nov 25, 2009 at 19:10

Roman

4,64110 gold badges46 silver badges72 bronze badges

Collectives™ on Stack Overflow

jQuery disable form element when checkbox is checked

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related