jQuery Disable Multiple Dropdowns Not Working

Question

I have dropdowns for a business to enter their hours. Each day has a drop down with the ID of hours_dayname_open and hours_dayname_closed. I also have a checkbox to mark it as closed. I am using the following jQuery to disable the drop down if it is checked:

$("#closed_monday").click( function(){
    if($(this).is(':checked')){
        $("#hours_monday_open").attr("disabled", true);
        $("#hours_monday_closed").attr("disabled", true);
    }else{
        $("#hours_monday_open").attr("disabled", false);
        $("#hours_monday_closed").attr("disabled", false);
    }
});

However, when the checkbox is selected only the open hours is disabled/enabled... The closed dropdown seems to be getting ignored.

Answer 1

The proper attribute, strangely, is disabled, not true.

$("#hours_monday_open").attr("disabled", "disabled");

To enable it, remove the disabled attribute:

$("#hours_monday_open").removeAttribute("disabled");

Since jQuery 1.6, you can use the .prop() functionality to clear/set this.

Answer 2

    $("#closed_monday").click( function(){
      if($(this).is(':checked')){
        $("#hours_monday_open, #hours_monday_closed").attr("disabled", "disabled");
      }else{
        $("#hours_monday_open, #hours_monday_closed").removeAttribute("disabled");
      }
    });​

Answer 3

$("#closed_monday").change( function(){
    if($(this).is(':checked')){
        $("#hours_monday_open").attr("disabled", "disabled");
        $("#hours_monday_closed").attr("disabled", "disabled");
    }else{
        $("#hours_monday_open").removeAttribute("disabled");
        $("#hours_monday_closed").removeAttribute("disabled");
    }
});

It is a simple change to .change() and .click(), just the wrong event.

http://jsfiddle.net/6Yr8Q/2/