troubleshooting Question

Cannot disable C#.NET checkbox list labels with JavaScript

Avatar of vcbertini
vcbertiniFlag for United States of America asked on
JavaScript.NET ProgrammingC#
12 Comments1 Solution1020 ViewsLast Modified:
I need to do some client-side control manipulation on my web page. A page post-back is not possible on this page since that would cause a whole host of additional problems, so it has to be JavaScript.

Everything seems to be working just fine except I cannot get the checkbox labels within my checkbox list to turn grey when the control is disabled.  The users are getting confused when the labels are still black but the boxes are black. I need to be able to turn them grey, and have tried (code is below).  

I've done some research online and found it's an IE issue with how checkboxes are rendered - apparently it wraps them in a SPAN tag and disables that. There is a solution for how to fix a single checkbox, but not a checkbox list. I'm afraid I'm not skilled enough in JavaScript to retro-fit the single checkbox code to the list.

Here is the Javascript I have:

<script type="text/javascript">

        function hideRow(controlID) {
            var trigger = controlID;
            var category = document.getElementById("ddlPrograms");
            var catValidation = document.getElementById("rfvPrograms");
            var subcat = document.getElementById("ddlSubcategory");
            var scatValidation = document.getElementsByID("rfvSubcategory");
            var sort = document.getElementById("txtSortOrder");
            var sortlbl = document.getElementById("lblSortOrder");
            var loclbl = document.getElementById("lblLocation");
            var locChecklist = document.getElementById('<%= cblLocation.ClientID %>');
            var location = locChecklist.getElementsByTagName("input");
            var locValidation = document.getElementById("cvLocation");

            if (trigger == "divCategory") {
                /* CATEGORY has been chosen
                 * 1. Clear Subcategory drop-down & disable
                 * 2. Set sort to zero & disable
                 * 3. enable category drop-down
                 * 4. enable location checkboxes
                subcat.options[subcat.selectedIndex].selected = false;
                subcat.disabled = true;
                ValidatorEnable(scatValidation, false);
                sort.value = "0";
                sort.disabled = true;
       = 'LightGray';
                category.disabled = false;
                ValidatorEnable(catValidation, true);
                loclbl.disabled = false;
       = 'Black';
                for (var i = 0; i < location.length; i++) {
                    var elem = location[i];
                    if (elem.type == 'checkbox') {
               = 'Black'
                        elem.disabled = false;
                ValidatorEnable(locValidation, true);
                /* SUBCATEGORY has been chosen
                * 1. Clear Category drop-down & disable
                * 2. Set sort to 1
                * 3. Uncheck Location & disable
                category.options[category.selectedIndex].selected = false;      // Clear any existing category values
                category.disabled = true;                                       // Disable category drop-down
                ValidatorEnable(catValidation, false);                          // Disable category validation
                sort.disabled = false;                                          // Enable sort value
                sort.value = "1";                                               // Set sort to default value of 1
       = 'Black';                                  // Turn sort label to enabled black
                subcat.disabled = false;                                        // Enable subcategory drop-down
                ValidatorEnable(scatValidation, true);                          // Enable subcategory validation
                loclbl.disabled = true;                                         // Disable location label
       = 'LightGray';                               // Turn label color to grey
                for (var i = 0; i < location.length; i++)                       
                    var elem = location[i];
                    if (elem.type == 'checkbox') {
                        elem.checked = false;                                   // Clear any existing location values
               = 'LightGray';                         // Set checkbox labels to Grey color
                        elem.disabled = true;                                   // Disable checkboxes
                ValidatorEnable(locValidation, false);

        function ValidateLocationList(source, args) {
            var chkListModules = document.getElementById('<%= cblLocation.ClientID %>');
            var chkListinputs = chkListModules.getElementsByTagName("input");
            for (var i = 0; i < chkListinputs.length; i++) {
                if (chkListinputs[i].checked) {
                    args.IsValid = true;
            args.IsValid = false;
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 12 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros