How can I use jQuery to make a group of radiobuttons inactive?

Question

I want to have a group of radiobuttons that are inactive until a checkbox is clicked.

In other words, when the user checks a checkbox, it will allow the user to use the radiobuttons. If the user unchecks a checkbox, it will make the radiobuttons inactive, so the user cannot select them anymore.

Is there a solution using jQuery that I can use to achieve this?

Answer 1

Assuming that the radiobuttons have all the same name, then you can use the attribute selector for this:

$('#checkboxid').click(function() {
    $('input[name="radiobuttonname"]').attr('disabled', !this.checked);
});

This will enable the radiobuttons if the checkbox is checked and disable when unchecked.