Enabling / Disabling checkboxes on single checkbox click using JQuery

Question

I'm new to JQuery and struggling to fix a problem in which I'm trying to disable a number of checkboxes when one Main checkbox is checked.

I have a form which contains 1 primary checkbox and 3 secondary checkboxes. When the primary checkbox is checked, all the other secondary checkboxes are disabled but must have a checked status by default. And when the primary checkbox is unchecked then all the other secondary checkboxes which were disabled turn to enabled and must all be checked. By default, when a user arrives on the form: the primary checkbox must be checked and thus, the other 3 must be checked and disabled.

this is my code:

<s:checkbox id="primary_CB" name="primaryCB" value="true"/>Primary checkbox
<s:checkbox cssClass="secondary_CB" name="secondary_CB1"/>Secondary checkbox1
<s:checkbox cssClass="secondary_CB" name="secondary_CB2"/>Secondary checkbox2
<s:checkbox cssClass="secondary_CB" name="secondary_CB3"/>Secondary checkbox3

my JQuery code:

$('#primary_CB').click(function () {
if ($(this).attr('checked')) {
$(".secondary_CB").attr('disabled', 'disabled');
} else {
    $(".secondary_CB").removeAttr('disabled');
    }
});

however my code works in strange way, when I'm on the form for the first time, all 4 checkboxes are checked, none disabled. Only when I uncheck/check again the primary checkbox that the disable function takes place. Also, when disable again all secondary checkboxes go unchecked automatically.

Can anyone please help?

wirey00 · Accepted Answer · 2012-08-27 13:41:24Z

1

This should work, if I understand your problem correctly:

$("#primary_CB").click(function() {
    $("input.secondary_CB").prop("disabled", !this.checked);
});

for jQuery below 1.6

$("#primary_CB").click(function() {
    $("input.secondary_CB").attr("disabled", !this.checked);
});

edited Aug 27, 2012 at 13:41

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

answered Aug 27, 2012 at 12:48

sQVe

2,01513 silver badges16 bronze badges

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

6 Comments

wirey00 Over a year ago

Or you can get rid of the if/else and just do $("input.secondary_CB").prop("disabled", !this.checked);

sQVe Over a year ago

@wirey Oh devil you. Of course, sometimes you try to answer way to quickly :) Updated and thanks for the suggestion.

user1353307 Over a year ago

just tried it, but it looks like I have a problem using prop() method. I'm using jquery-1.3.2.

sQVe Over a year ago

@user1353307 Then you have to use .attr(), if you can't update to jQuery 1.6+.

wirey00 Over a year ago

@user1353307 use attr instead of prop then.. so for this line of code just replace prop with attr

|

vivek salve · Accepted Answer · 2012-08-27 12:41:52Z

0

$('#primary_CB').click(function () {
if ( !$(this).is ( ":checked" ) )
{
$(".secondary_CB").attr ( "disabled" , true );
} else {
    $(".secondary_CB").removeAttr ( "disabled" );
    }
});

answered Aug 27, 2012 at 12:41

vivek salve

9911 gold badge10 silver badges20 bronze badges

2 Comments

sQVe Over a year ago

You should use .prop() instead of attr for this. We want to change the property, not the attribute.

user1353307 Over a year ago

it looks like.prop() doesn't works at all. I'm using jquery-1.3.2, when I use .attr() the code above works just like I described above (not as I wish), when I replace it with .prop() nothing happens, as if the code wasn't there. can it be because my JQuery version doesn't include prop method?

Collectives™ on Stack Overflow

Enabling / Disabling checkboxes on single checkbox click using JQuery

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related