Toggle disable/enable checkbox by replacing class name

Question

I have a set of 5 checkboxes with class set to "child". I want that if I select one checkbox, rest of them goes disabled. I have tried following code but it disables the all checkboxes.

if ( !$(this).is ( ":checked" ) ) {
  $(this).removeClass().addClass("hand .parent");
  $(".child").attr ( "disabled" , true );
}

then even i tried adding this

  $(this).removeAttr ( "disabled" );

but it still disables the all controls

help plz! Thanks

Answer 1

Did you do

$('.child').removeAttr('disabled')

Since you tried it on .child, it's kind of hard to tell the context of this since you're not posting the full code.

Also, are you there there isn't a readonly attribute being set somewhere?

Answer 2

Are you trying to do something like this?

See it here: http://jsfiddle.net/fEA3Y/

var $cbox = $('.child').change(function() {
    if(this.checked) {
        $cbox.not(this).attr('disabled','disabled');
    } else {
        $cbox.removeAttr('disabled');
    }
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

If you really need to toggle classes for some reason, you could do this:

http://jsfiddle.net/fEA3Y/2/

var $cbox = $('.child').change(function() {
    if(this.checked) {
        $(this).toggleClass('child parent');
        $cbox.not(this).attr('disabled','disabled');
    } else {
        $(this).toggleClass('child parent');
        $cbox.removeAttr('disabled');
    }
});​