how to perform events when a checkbox is checked/unchecked in jquery

Question

I have the following jquery code which works fine.

$('#onlyTwo').click(function() {
                $("#textarea3").attr("disabled", true);
                $("#textarea4").attr("disabled", true);
                $("#radio3").attr("disabled", true);
                $("#radio4").attr("disabled", true);
                return true;
            });

This is making some fields disabled when 'onlyTwo' checkbox is clicked. How can i make these fields enabed again when 'onlyTwo' checkbox is unchecked...

basically i want to know how to find out whether a checkbox is checked or not

Answer 1

In your handler you should check the value of onlyTwo.

If it is clicked, you enable the fields, otherwise disable them.

Disabled can be a tricky attribute. It may be safest to remove the attribute to enable it.

Answer 2

$('#onlyTwo').click(function() {
     var elements = ['textarea3', 'textarea4', 'radio3', 'radio4'];
     var checked = $(this).attr('checked');

     jQuery.each(elements, function(element) {
       if (checked) {
         $('#'+element).attr('disabled', true);
       } else {
         $('#'+element).removeAttr('disabled');
       }
     });
})

Thats a simple solution to toggle the disabled attribute on all the elements you want when $('#onlyTwo') is checked.

Fixed array problems, lol this was full of little bugs.

Answer 3

or

$('#onlyTwo').click(function(){
   var stuff = $("#textarea3,  #textarea4, #radio3, #radio4");
   if($(this).is(":checked")}
    stuff.attr("disabled", true);
   else {
    stuff.removeAttr("disabled");
   }
 });

Answer 4

$('#onlyTwo').change(function() {
    $('.disableMe').attr('disabled', $(this).is(':checked'));
});

so you need to add 'disableMe' class to all the inputs, textareas, selects... that you wish to disable.