Disable individual list items in CheckBoxList

ASP.NET CheckBoxList control has a handy property Enabled that provides a quick and dirty way to enable/disable all the list items in the check box list. When CheckBoxList.Enabled=”False”, all list items will be grayed out and no selection is accepted. But what if we only want to disable some of the list items in the check box list as shown in the screen shot?

How to implement this?

Option 1 (not a good one): in code behind, loop through the CheckBoxList list items to disable needed items. This approach involves postback, it is why I don’t recommend it.

Option 2 (not a good one either): use the same code as in Option 1, but put the CheckBoxList control in an UpdatePanel to avoid full PostBacks. However, it really complicates a very simple question, doesn’t it.

Option 3 (the right one): use JavaScript.

We need two JavaScript functions: one is for enabling the CheckBoxList items, and the other one is for disabling the CheckBoxList items.

function enableCBList(cbListID)
{
   var browser = navigator.appName;
   var pos = 0;
   if (browser.indexOf("Microsoft") >=0)
   {
     pos = 0;
   }
   else
   {
     pos = 1;
   }

   var tbody = document.getElementById(cbListID).childNodes[pos];
   var length = tbody.childNodes.length - pos;

 for (i=0;i<length;i++)
 {
  var td = tbody.childNodes[i].childNodes[pos];
  var chk = td.childNodes[0];
  chk.disabled = false;
 }
}

function disableCBList()
{

   var browser = navigator.appName;
   var pos = 0;
   if (browser.indexOf("Microsoft") >=0)
   {
     pos = 0;
   }
   else
   {
     pos = 1;
   }

   var tbody = document.getElementById("<%=CheckBoxList1.ClientID%>").childNodes[pos];
   var length = tbody.childNodes.length - pos;

 for (i=0;i<length;i++)
 {
  var td = tbody.childNodes[i].childNodes[pos];
  var chk = td.childNodes[0];
  if (i%2==0)
  {
   chk.disabled = true;
  }
  else
  {
   chk.disabled = false;
  }
 }
}

The first couple of lines in both function are for finding each item in the CheckBoxList control. The reason for doing this way is due to the way the CheckBoxList control is rendered. The following screen shot shows how a CheckBoxList control is rendered in browser:

Also, Internet Explorer also use 0 for accessing childNodes, but other browser use 1. The reason seems to be, by investigating the DOM object, there is a “\n” before each child node and Internet Explorer somehow ignores that character but others don’t.

How to use the JavaScript code?

1. To disable the CheckBoxList control when the page is loaded, add onload=”disableCBList() to the <body> tag:

2. Attach the “enableCBList” function to the “Enable All” CheckBox:

In Page_Load event handler, add this line:

Me.cbEnableAnswers.Attributes.Add(“onclick”, “enableCBList(‘” & _
Me.CheckBoxList1.ClientID.ToString() & “‘)”)

That’s it.

Let me know if it helps you.

0 0 votes

Article Rating