CODEWITHSUNDEEP
javascriptjquery
user2956901
user2956901

Reputation: 13

Checkbox in label tag : Different result in Chrome and Firefox

<label for="checkbox2" id="label1">
    click <input type="checkbox" id="checkbox1">
</label>
<input type="checkbox" disabled="true" id="checkbox2"/>

$(document).ready(function(){
    $('#checkbox1').click(function(event) {
        $('#checkbox2').prop('disabled', !this.checked);
    });
});

There's two checkboxes in the page. (#checkbox1, #checkbox2)
#checkbox1 is in label tag, and #checkbox2 is not.
I want to enable/disable #checkbox2 depending on #checkbox1.

When I check #checkbox1, #checkbox2 is enabled properly.
But #checkbox2 is checked simultaneously in Firefox only. (IE and Chrome is not)

I think the problem is related to ordering of events. But, I don't know exactly.

http://jsfiddle.net/vtLzj/2/

edited:

Upvotes: 1

Views: 388

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388396

The label elements for attribute must be attached to the checkbox1 element, but you can change the checked state of checkbox2 in the change handler of checkbox1

<label for="checkbox1" id="label1">click
    <input type="checkbox" id="checkbox1">
</label>
<input type="checkbox" disabled="true" id="checkbox2" />

then

$(document).ready(function () {
    $('#checkbox1').change(function (event) {
        $('#checkbox2').prop({
            disabled: !this.checked,
            checked: this.checked
        });
    });
});

Demo: Fiddle

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Remove the for attribute, and change the event listener from click to change.

Upvotes: 2

Related Questions