Question

I have an unusual need. I have five input checkboxes that look like this:

<input class="abc" id="Response[0]" name="Response[0]" type="checkbox" />
<input class="abc" id="Response[1]" name="Response[1]" type="checkbox" />
<input class="abc" id="Response[2]" name="Response[2]" type="checkbox" />
<input class="abc" id="Response[3]" name="Response[3]" type="checkbox" />

I have a button that the user can click but I want that disabled until the user has clicked in one of the check boxes.

Is there some way that I can sense the user having clicked in a checkbox and then change the state of the button from disabled=”disabled” if this has happened. I already use jQuery on the page so I am hoping for a simple jQuery solution.

Answer 1

Yes, this isn’t hard to do with change. I’m going to assume that you don’t mind if more than one of the checkboxes is checked, as long as at least one is…

$('input.abc').change(function() {
    if ($('input.abc:checked').length) {
        $('#yourButton').prop('disabled', false);
    } else {
        $('#yourButton').prop('disabled', true);
    }
});

Note that it would be a significant improvement if you could give the input elements a class, or if you could specify a common parent element that had no other input children. The attribute-starts-with selector name^="value" is fairly slow.

Edit: changed to a class selector.