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:
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>
Last Comment
leakim971
No, we would like to see the markup
ASKER
Not sure what you mean?
the html asp
ASKER
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" />
<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" />
<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>
<asp:TextBox ID="txtSortOrder" runat="server" Columns="3" MaxLength="2" TabIndex="7"></asp:TextBox>
<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>
</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>
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>
ASKER
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?
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?
did you tried it?
there was some syntax errors
there was some syntax errors
ASKER
Yes, I did, but the checkbox tags remain black when disabled.
it work fine for me :
ASKER
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
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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.
.NET Programming
The .NET Framework is not specific to any one programming language; rather, it includes a library of functions that allows developers to rapidly build applications. Several supported languages include C#, VB.NET, C++ or ASP.NET.
137K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
