Ameh Ameh - 1 month ago 8
ASP.NET (C#) Question

How to disable some checkboxes of checkboxlist based on database value in asp.net?

I have a checkboxlist which has 26 values getting filled from database.

<asp:CheckBoxList ID="chkList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%" DataTextField="Name" DataValueField="ID" AutoPostBack="True" Visible="false" OnSelectedIndexChanged="chkList1_SelectedIndexChanged">
</asp:CheckBoxList>

public QueSet()
{
SqlConnection conn = new SqlConnection(Settings.DatabaseConnectionString);

try
{
conn.Open();
SqlCommand com = new SqlCommand("sp_SelectQueSet",conn);
com.CommandType = CommandType.StoredProcedure;
SqlDataAdapter sa = new SqlDataAdapter(com);
DataSet ds = new DataSet();
sa.Fill(ds);
if(ds.Tables.Count > 0)
{this.Data = ds.Tables[0];}
}
catch(Exception ex)
{
throw new ApplicationException(ex.Message);
}
finally
{conn.Close();}

}

QueSet q = new QueSet();
chkList1.DataSource = q.Data;
chkList1.DataBind();


Based on above code, the checkboxlist gets data from database. One of the values from the database is "Nothing" with ID 51.

I want to disable all the other checkboxes if user selects "Nothing" value.

protected void chkList1_SelectedIndexChanged(object sender, EventArgs e)
{
//what should I do here?
}

Answer Source

This can be easly achived by Client Script, Server SelectedIndexChanged is not required. do the steps as follows

  1. Remove AutoPostback = "true" and OnSelectedIndexChanged="..." from your CheckboxList control and Add the property CssClass ="CHKList"

  2. Attach jQuery.js , say jQuery-1.7 or latest version

Add the following code in ASPX Page. This will disable all checkboxes when anyone of check box is clicked and Enable back if unchecked

   
<script>


   $(document).ready(function () {

            $(".CHKList input:checkbox").click(function () {

                if ($(this).prop("checked") == true) {
                    $(".CHKList input:checkbox").prop("disabled", true);//older version of jQuery prop will not work , use attr("disabled","disabled");
                    $(this).prop("disabled", false);
                }
                else {
                    $(".CHKList input:checkbox").prop("disabled", false);
                }
            });
        });
</script>