Enable CheckBoxList using CheckBox? - ASP.NET

Question

I am having trouble with my code, I was able to implement it using code behind but it was not good as I have sliding panel (using jQuery) which were interfered with on post back.

The CheckBoxList is disabled by default with no auto postback.

I want the CheckBoxList to become enables if the CheckBox is checked.

Currently, I have this code:

$("#BizAppsCheckBox").click(function () {
        if (this.checked)
            $('#BizAppsCheckBoxList').removeAttr('disabled');
        else
            $('#BizAppsCheckBoxList').attr('disabled', 'disabled');
    });

How can I fix this issue?

Best working solution for me, thanks to the answers:

$(document).ready(function () {    
if ($("#BizAppsCheckBox").prop('checked') == false) {
                $('#BizAppsCheckBoxList *').prop('disabled', true);
            }
            else {
                $('#BizAppsCheckBoxList *').prop('disabled', false);
            }

$("#BizAppsCheckBox").click(function () {
                if (this.checked)
                    $('#BizAppsCheckBoxList *').prop('disabled', false);
                else
                    $('#BizAppsCheckBoxList *').prop('disabled', true) &
                $('#BizAppsCheckBoxList *').prop('checked', false);
            });
});

Answer 1

Try this :

You should use the ClientID cuz asp.net does provide different ID ( when under container)

$("#<%=BizAppsCheckBox.ClientID%> ").click(function () {
                if (this.checked)
                    $('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',false);
                else
                    $('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled', true);
            });

edit

 $("#<%=BizAppsCheckBox.ClientID%>").click(function () {
                if (this.checked)
                    $('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', false);
                else
                    $('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', true);
            });

Answer 2

Use prop instead of attr , if ClientIDMode is not static then use ClientID of server controls

$("#<%= BizAppsCheckBox.ClientID %>").click(function () {
      if (this.checked)
           $('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', true);
      else
           $('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', false);
});

Answer 3

this will do the trick

$("#<%=BizAppsCheckBox.ClientID%>").click(function () {       
       $('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});

or

$("#BizAppsCheckBox").click(function () {
         $('#BizAppsCheckBoxList').prop('disabled', !this.checked);
});

try using .on()

$("document").on("click","#<%=BizAppsCheckBox.ClientID%>",function(){
         $('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});