disable some dropdown select controls when a user clicks on a checkbox

Question

i have a time dropdown that shows hour in one select, minutes in another and AM/PM in a third. I have a checkbox that says "All day"

i want it so when the user checks on "All day" all of the select dropdowns become disabled.

Answer 1

$('#allday').toggle(
    function(){
     $('#hour, #minutes, #am-pm').attr('disabled', 'disabled');
    },
    function(){
     $('#hour, #minutes, #am-pm').removeAttr('disabled');
    }
);

Answer 2

Try this.

$('#checkbox').change(function(){
    $('#Hour, #Minute, #Period').attr('disabled', this.checked);    
});

Answer 3

The trouble with checkboxes is principally getting them to work right in IE6, since the change event fires at all manner of unhelpful times.

Let's start with the function to do the disabling:

function onCheckChange() {
  if ($("#all-day-checkbox").is(':checked'))
    $("select").attr('disabled', 'disabled');
  else
    $("select").removeAttr('disabled');
}

Note that I here use just select which is almost certainly more broad than you'd want, but select.some-class-to-identify-the-hours-and-minutes-and-seconds-dropdowns would work just as well.

Note also that the function figures out itself whether the box is checked, making it idempotent: it's safe to call repeatedly during the process of checking a box.

Now we just need to bind that function to a few different events:

$("#all-day-checkbox").click(onCheckChange).change(onCheckChange);
$("label[for=all-day-checkbox]").click(onCheckChange);