Avatar of vcbertini
vcbertiniFlag for United States of America asked on

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

.NET ProgrammingJavaScriptC#

Avatar of undefined
Last Comment
vcbertini

8/22/2022 - Mon
leakim971

No, we would like to see the markup
ASKER
vcbertini

Not sure what you mean?
leakim971

the html asp
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
vcbertini

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

leakim971

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

ASKER
vcbertini

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

did you tried it?

there was some syntax errors
ASKER
vcbertini

Yes, I did, but the checkbox tags remain black when disabled.
leakim971

it work fine for me :wok
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
vcbertini

The boxes are greyed-out, but the tags "Location1", "Location2" and "Location3" are black (not grey) like the label "Program Location(s)"
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
vcbertini

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.