Cannot disable C#.NET checkbox list labels with JavaScript

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) {
            //debugger;
            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;
                sortlbl.style.color = 'LightGray';
                category.disabled = false;
                ValidatorEnable(catValidation, true);
                loclbl.disabled = false;
                loclbl.style.color = 'Black';
                for (var i = 0; i < location.length; i++) {
                    var elem = location[i];
                    if (elem.type == 'checkbox') {
                        elem.style.color = 'Black'
                        elem.disabled = false;
                    }
                }
                ValidatorEnable(locValidation, true);
            } 
            else 
            {
                /* 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
                sortlbl.style.color = '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
                loclbl.style.color = '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
                        elem.style.color = '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;
                    return;
                }
            }
            args.IsValid = false;
        }
    </script>

Open in new window

vcbertiniAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
No, we would like to see the markup
0
vcbertiniAuthor Commented:
Not sure what you mean?
0
leakim971PluritechnicianCommented:
the html asp
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

vcbertiniAuthor Commented:
Here is the HTML:

<tr>
      <td align="left" valign="top" colspan="2"><p><strong>The 
          Degree/Certificate/Credential/Concentration named above:</strong></p>
          <asp:RadioButton ID="rbCategory" runat="server" GroupName="degreeType"
              Text="belongs to this Program of Study: " Checked="True" TabIndex="3" 
              onClick="hideRow('divCategory')" oncheckedchanged="rbCategory_CheckedChanged" />
&nbsp;<asp:DropDownList ID="ddlPrograms" runat="server" TabIndex="4">
         </asp:DropDownList> 
          <asp:RequiredFieldValidator ID="rfvPrograms" runat="server" 
              ControlToValidate="ddlPrograms" Display="Dynamic" Enabled="False" 
              ErrorMessage="RequiredFieldValidator" Font-Bold="True" ForeColor="Red" 
              SetFocusOnError="True">* Required</asp:RequiredFieldValidator>
          <br />
         <asp:RadioButton ID="rbSubcategory" runat="server" GroupName="degreeType" Text="is a Subcategory of: " onClick="hideRow('divSubcategory')"
         TabIndex="5" />
&nbsp;<asp:DropDownList ID="ddlSubcategory" runat="server" TabIndex="6">
            </asp:DropDownList>
            <asp:RequiredFieldValidator ID="rfvSubcategory" runat="server" 
              ControlToValidate="ddlSubcategory" Display="Dynamic" Enabled="False" 
              Font-Bold="True" ForeColor="Red" 
              SetFocusOnError="True" Text="* Required"></asp:RequiredFieldValidator></td>
      </tr>
      <tr>
        <td align="left" valign="top">
            <asp:Label ID="lblSortOrder" runat="server" Text="Sort Order" Font-Bold="True" /></td>
        <td>
            &nbsp;<asp:TextBox ID="txtSortOrder" runat="server" Columns="3" MaxLength="2" TabIndex="7"></asp:TextBox>&nbsp;
            <asp:RequiredFieldValidator ID="rfvSortOrder" runat="server" 
                ControlToValidate="txtSortOrder" Display="Dynamic" Enabled="False" 
                Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Text="* Required for subcategories"></asp:RequiredFieldValidator>
&nbsp;</td>
      </tr>
      <tr>
        <td ID="tdLocation" runat="server" align="left" valign="top">
            <asp:Label ID="lblLocation" runat="server" Text="Program location(s)" 
                Font-Bold="True"></asp:Label>
          </td>
        <td align="left" valign="top">
            <asp:CheckBoxList ID="cblLocation" runat="server" RepeatColumns="3" 
                RepeatDirection="Horizontal" TabIndex="8">
                <asp:ListItem Value="1">Location1</asp:ListItem>
                <asp:ListItem Value="2">Location2</asp:ListItem>
                <asp:ListItem Value="3">Location3</asp:ListItem>
            </asp:CheckBoxList><asp:CustomValidator runat="server" ID="cvLocation" ClientValidationFunction="ValidateLocationList"
  ErrorMessage="* Required" Font-Bold="True" Display="Dynamic" ForeColor="Red" 
                SetFocusOnError="True" />

          </td>
      </tr>

Open in new window

0
leakim971PluritechnicianCommented:
Try this :
<script type="text/javascript">

    function hideRow(controlID) {
        debugger;
        var trigger = controlID;
        var category = document.getElementById("ddlPrograms");
        var catValidation = document.getElementById("rfvPrograms");
        var subcat = document.getElementById("ddlSubcategory");
        var scatValidation = document.getElementById("rfvSubcategory");
        var sort = document.getElementById("txtSortOrder");
        var sortlbl = document.getElementById("lblSortOrder");
        var loclbl = document.getElementById("lblLocation");
        var locChecklist = document.getElementById('<%= cblLocation.ClientID %>');
            var mylocation = 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.selectedIndex = 0;
                subcat.disabled = true;
                ValidatorEnable(scatValidation, false);
                sort.value = "0";
                sort.disabled = true;
                sortlbl.style.color = 'LightGray';
                category.disabled = false;
                ValidatorEnable(catValidation, true);
                loclbl.disabled = false;
                loclbl.style.color = 'Black';
                for (var i = 0; i < mylocation.length; i++) {
                    var elem = mylocation[i];
                    if (elem.type == 'checkbox') {
                        elem.style.color = 'Black'
                        elem.disabled = false;
                    }
                }
                ValidatorEnable(locValidation, true);
            }
            else {
                /* SUBCATEGORY has been chosen
                * 1. Clear Category drop-down & disable
                * 2. Set sort to 1
                * 3. Uncheck Location & disable
                */
                category.selectedIndex = 0;      // 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
                sortlbl.style.color = '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
                loclbl.style.color = 'LightGray';                               // Turn label color to grey
                for (var i = 0; i < mylocation.length; i++) {
                    var elem = mylocation[i];
                    if (elem.type == 'checkbox') {
                        elem.checked = false;                                   // Clear any existing location values
                        elem.style.color = '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;
                    return;
                }
            }
            args.IsValid = false;
        }
    </script>

Open in new window

0
vcbertiniAuthor Commented:
Not sure if I'm missing something, but I'm not seeing how that code is affecting the checkbox list in any way. The changes I see were to clearing the value of the drop-down lists, which was already working just fine.

The checkbox list is actually disabling just fine, but the labels for each of the checkboxes remain black instead of grey (dimmed) which is confusing the users. This is the answer I am seeking - how do I dim the check box list labels?

Did I miss a small change you made in the code somewhere?
0
leakim971PluritechnicianCommented:
did you tried it?

there was some syntax errors
0
vcbertiniAuthor Commented:
Yes, I did, but the checkbox tags remain black when disabled.
0
leakim971PluritechnicianCommented:
it work fine for me :wok
0
vcbertiniAuthor Commented:
The boxes are greyed-out, but the tags "Location1", "Location2" and "Location3" are black (not grey) like the label "Program Location(s)"
0
leakim971PluritechnicianCommented:
Just use this too for the <label /> of each checkbox :
            var myLocationLabel = locChecklist.getElementsByTagName("label");

and set color with : myLocationLabel.style.color = "#D3D3D3";
<script type="text/javascript">

        function hideRow(controlID) {
            debugger;
            var trigger = controlID;
            var category = document.getElementById("ddlPrograms");
            var catValidation = document.getElementById("rfvPrograms");
            var subcat = document.getElementById("ddlSubcategory");
            var scatValidation = document.getElementById("rfvSubcategory");
            var sort = document.getElementById("txtSortOrder");
            var sortlbl = document.getElementById("lblSortOrder");
            var loclbl = document.getElementById("lblLocation");
            var locChecklist = document.getElementById('<%= cblLocation.ClientID %>');
            var mylocation = locChecklist.getElementsByTagName("input");
            var myLocationLabel = locChecklist.getElementsByTagName("label");
            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.selectedIndex = 0;
                subcat.disabled = true;
                ValidatorEnable(scatValidation, false);
                sort.value = "0";
                sort.disabled = true;
                sortlbl.style.color = 'LightGray';
                category.disabled = false;
                ValidatorEnable(catValidation, true);
                loclbl.disabled = false;
                loclbl.style.color = 'Black';
                for (var i = 0; i < mylocation.length; i++) {
                    var elem = mylocation[i];
                    if (elem.type == 'checkbox') {
                        elem.style.color = 'Black';
                        elem.disabled = false;
                        myLocationLabel[i].style.color = "black";
                    }
                }
                ValidatorEnable(locValidation, true);
            }
            else {
                /* SUBCATEGORY has been chosen
                 * 1. Clear Category drop-down & disable
                 * 2. Set sort to 1
                 * 3. Uncheck Location & disable
                 */
                category.selectedIndex = 0;      // 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
                sortlbl.style.color = '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
                loclbl.style.color = 'LightGray';                               // Turn label color to grey
                for (var i = 0; i < mylocation.length; i++) {
                    var elem = mylocation[i];
                    if (elem.type == 'checkbox') {
                        elem.checked = false;                                   // Clear any existing location values
                        elem.style.color = 'LightGray';                         // Set checkbox labels to Grey color
                        elem.disabled = true;                                   // Disable checkboxes
                        myLocationLabel[i].style.color = "#D3D3D3";
                    }
                }
                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;
                    return;
                }
            }
            args.IsValid = false;
        }
    </script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vcbertiniAuthor Commented:
That worked! Thank you so much! It seemed so simple at first, but hours and hours later, I couldn't get anything to work.  I appreciate your time with this.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.