Jquery disable element on checkbox change

Question

<input type="checkbox" id="dw"/>

<select id="oo">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

$('#dw').change(function() {
    if ($(this).is(':checked')) {
        $('#oo').removeAttr('disabled');
    } else {
        $('#oo').attr('disabled', true);
    }
}

I don't see where the error would be.

http://jsfiddle.net/f8jGU/

just use `$('#dw').on('change', function() {` – Priyank Patel Jun 01 '12 at 05:46 — Priyank Patel, Jun 01 '12 at 05:46

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

$('#dw').on('change', function() {

    // If this.checked = true, then select will enabled else disabled
    // instead of attr() use prop()
    $('#oo').prop('disabled', !this.checked);
});

Working sample

Read more about .prop()

You can gain huge from below link:

.prop() vs .attr()

edited May 23 '17 at 12:01

Community

1
1

answered Jun 01 '12 at 05:44

thecodeparadox

86,271
21
138
164

score 1 · Accepted Answer · answered Jun 01 '12 at 05:46

Working demo http://jsfiddle.net/2gbHQ/5/

Good Read http://api.jquery.com/prop/

The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

Jquery code

$('#dw').change(function() {
    if ($(this).is(':checked')) {
        $('#oo').prop('disabled', false);
    } else {
        $('#oo').prop('disabled', true);
    }
});

HTML

<input type="checkbox" id="dw" />

<select id="oo" disabled="true">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

score 0 · Answer 3 · answered Jun 01 '12 at 06:02

0

Your code also works except that you missed to close the change function. Please see the updated fiddle http://jsfiddle.net/f8jGU/1/

answered Jun 01 '12 at 06:02

raddykrish

1,866
13
15

score 0 · Answer 4 · answered Aug 26 '16 at 12:31

The reason your code didn't work is explained in the jQuery documentation for .prop() (https://api.jquery.com/prop/):

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
1  $( "input" ).prop( "disabled", false );
2  $( "input" ).prop("checked", true );
3  $( "input" ).val( "someValue" );
Important: the .removeProp() method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See .removeProp() for more information.

Jquery disable element on checkbox change

4 Answers4