Disabling other items in a checkboxlist not working

Question

I am trying this code to disable my other options in my aspcheckbox list( not a checkbox this is asp.net checkboxlist control)...

Here is the jquery

$(document).ready(function () {
    $('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {

        var currentIdone = 'Unknown';
        var checked = false;
        $('#<%=lstExposureValue.ClientID%> input:checkbox').each(function () {

            var currentId = $(this).next().html();
            if (currentId == currentIdone) {
                if (checked) {
                    $(this).prop('enabled', true);
                    $("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("enabled", true);
                    checked = false;
                    return;
                }
                else {
                    $("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("disabled", true);
                    $("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("checked", false);
                    checked = true;
                }
            }
        });

    });

});

here is the asp.net

          <h3>
            One</h3>
         <asp:CheckBoxList ID="lstExposureValue" runat="server">
            <asp:ListItem>Short-term exposure</asp:ListItem>
             <asp:ListItem>Medium-term exposure</asp:ListItem>
             <asp:ListItem>Unknown</asp:ListItem>
          </asp:CheckBoxList>

so when unknown is selected the other 3 options has to be unselected and disabled. And when unknown is unchecked then all options should be enabled.

Right now whatever the option i selecte it disables the other options and when i uncheck the same option it disables all the options any help anyone please.....

Answer 1

$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("disabled", true);
$("#<%=lstExposureValue.ClientID%> input:checkbox:not(:checked)").prop("checked", false);

You cannot change the state of disabled elements. Check it first, then disable the element.

Answer 2

this is how you do.

$(document).ready(function () {
    var checked = false;
    $('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
        var currentIdone = 'Unknown';
        var currentId = $(this).next().html();
        if (currentId == currentIdone) {

            if (checked) {

                $("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
                checked = false;
                return;
            }
            else {
                $("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
                $(this).attr('checked', true);
                $('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
                checked = true;
            }


        }

    });
});

It Works