Disabling/Enabling asp.net checkboxlist items using javascritp





We  are using  asp.net check box server side control in ajax update panel. These are bind to SQS server.  We were facing a big problem. There were some busineess rule which were implementing on Post back i.e. on selection of check box from list other check box were getting disabled. We wrote some server side script on click event and were using Auto post property of list box control to validate those business ruels. Problem was it was very slow due to large data behind the page. We decided to do that validation on client side Following javascriopt does the job for us. It works for name three check boxes in a way that it disables all other check boxex when one them is selected.

Java Scritp code

<script type=”text/javascript”>

function checkBoxListOnClick(elementId)
{
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName(‘input’);
var checkedValue = ”;
var isChecked=false;

for (var i=0; i {
var checkBoxRef = checkBoxArray[i];
var labelArray = checkBoxRef.parentNode.getElementsByTagName(‘label’);
checkedValue = labelArray[0].innerHTML;

if (checkBoxRef.checked!=true)
continue;
if (checkedValue==”Non-denominational” || checkedValue==”Does Not Apply”  

checkedValue==”Inter-denominational”)
{
isChecked=true;
}
}

//if checked is true then
if (isChecked==true)
{

for (var i=0; i {
var checkBoxRef = checkBoxArray[i];
var labelArray = checkBoxRef.parentNode.getElementsByTagName(‘label’);
checkedValue = labelArray[0].innerHTML;
//check for non denomination
if (checkedValue==”Non-denominational”)
{
if (checkBoxRef.checked == true)
checkBoxRef.disabled=false;
else
checkBoxRef.disabled=true;

}
//check for does not aply
else if (checkedValue==”Does Not Apply”)
{

if (checkBoxRef.checked == true)
checkBoxRef.disabled=false;
else
checkBoxRef.disabled=true;
}
// inter denomination
else if (checkedValue==”Inter-denominational”)
{
if (checkBoxRef.checked == true)
checkBoxRef.disabled=false;
else
checkBoxRef.disabled=true;
}
else
{
checkBoxRef.disabled=true ;
checkBoxRef.checked=false;
}
}
}

else
{
for (var i=0; i {
var checkBoxRef = checkBoxArray[i];
checkBoxRef.disabled=false;
}
}

}
function readCheckBoxList()
{
var checkedItems = checkBoxListOnClick(‘‘);

}

</script>

C# code

 this.cblDenomination.Attributes.Add(“onclick”, “readCheckBoxList()”);

On the same pager another checkbox list was validating different business rules so I wrote another java scritp function for that.

//Phase chcekc box list
 function PhasecheckBoxListOnClick(elementId)
{
 var elementRef = document.getElementById(elementId);
 var checkBoxArray = elementRef.getElementsByTagName(‘input’);
 var checkedValue = ”;
 var isChecked=false;
           var count=0;
         
 
 
 for (var i=0; i<checkBoxArray.length; i++)
 {
      var checkBoxRef = checkBoxArray[i];
      var labelArray = checkBoxRef.parentNode.getElementsByTagName(‘label’);
      checkedValue = labelArray[0].innerHTML;
   
   if (checkBoxRef.checked!=true)
    continue;
    if (checkedValue==”Multi-Phase”)
    {
        isChecked=true;
     }
   }
  
  
//if checked is true then
   if (isChecked==true)
   {           
  
        for (var i=0; i<checkBoxArray.length; i++)
         {
         var checkBoxRef = checkBoxArray[i];
        var labelArray = checkBoxRef.parentNode.getElementsByTagName(‘label’);
        checkedValue = labelArray[0].innerHTML;
        if (checkBoxRef.checked==true)
                {
                count++;
                }
    //check for non denomination 
        if (checkedValue==”Multi-Phase”)
            {
             if (checkBoxRef.checked == true)
                checkBoxRef.disabled=false;
             else
                checkBoxRef.disabled=true;
       
            }
       
         else
         {
            checkBoxRef.disabled=true ;
            checkBoxRef.checked=false;
            }
        }
       } 
           
  else
    {
  
     for (var i=0; i<checkBoxArray.length; i++)
        {
         var checkBoxRef = checkBoxArray[i];
         var labelArray = checkBoxRef.parentNode.getElementsByTagName(‘label’);
            checkedValue = labelArray[0].innerHTML;
           
             if (checkBoxRef.checked==true)
                {
                count++;
                }
           if (checkedValue==”Multi-Phase”)
           {
               checkBoxRef.disabled=true;
            
           }
           else
            {
            checkBoxRef.disabled=false;
            }
        }
     }
     //make all check boxex enabled if none is selected
     if (count<=0)
      for (var i=0; i<checkBoxArray.length; i++)
        {
            var checkBoxRef = checkBoxArray[i];
             checkBoxRef.checked=false;
             checkBoxRef.disabled=false;
               
        }          
 
 }

Above javascript funtion is doing almost the same job it disables all other check boxes when Multi-Phase is selected. When un tick the Multi-Phase and select any one of the others the Multi=phase tick box get disabled.




Tags: , , , , , ,

Leave a Reply