View Full Version : Grey out text on checkbox
realitybend
07-01-2009, 02:52 PM
In my imaginary web page, I have a list of products. I also have a list of questions with (Yes) and (No) checkboxes beside them. If (No) is checked for question 1, the text for product 2 and 3 must change to grey instead of black. Etc. How could I do this?
Sawtooth500
07-01-2009, 11:36 PM
You gotta use javascript, make an onclick event handler for the checkbox which runs a script that changes the text you need from black to grey by modifying the CSS properties for that text.
realitybend
07-02-2009, 02:39 PM
I've done a little bit of javascript, but not much. Is there any way that someone could expound on this a bit?
Thanks.
realitybend
07-02-2009, 03:10 PM
My initial work can be seen at http://www.wagnermeters.com/meterselector.html. I was originally going to use an "onclick" for each of the radio buttons. Ansering "Yes" to the questions on the left would gray out certain links on the right, maybe one, maybe more. Answering "No" would use "onclick" would set it to the normal color.
Then I ran into a wall. Multiple questions can gray out the same link. If any of those related questions had a "Yes" next to it, if a user pressed "No" for one of the other related questions, it would have to stay gray instead of changing back. My method, however, would change it back to the original color.
I'm stuck. What would I do?
Also, as this seems to have turned to js, could an admin move this to the js forum?
BonRouge
07-02-2009, 10:26 PM
Can you be a little more specific about what should grey-out what?
Also, I'm not sure about name attributes, but 'id's can not start with a number - you need to change that.
If you do that - change the names and ids, and give us more details, I can probably help you.
realitybend
07-06-2009, 11:18 AM
The links on the right are what need to be grayed out. I've added numbers to the links to make it easier for me to be specific. I've also changed the id's and names (adding an "i" in front of them).
Question 1- "Yes" grays out all but link 1.
Q2- "Yes" grays out all but 9 and 10.
Q3- "Yes" grays out 1,3,6,7,8,9,10
Q4- "Yes" grays out all but 7
Q5- "Yes" grays out 3,6,7,8,9,10
Q6- "Yes" grays out 3,6,7,8,9,10
Q7- "Yes" grays out 5,6,7,8,9,10
Q8- the second option (5% - 20%) grays out 8
Q9- Analog grays out 1,2,3,4,5,8,10; Digital grays out 6,7,8,9; LED grays out all but 8
Q10- 1/2 inch grays out all but 7,8,10; 3/4 inch grays out 7,8,10
Q11- "Yes" grays out 7
I think this is what you meant by more specific. If not, let me know. Thanks!
BonRouge
07-06-2009, 09:06 PM
http://www.bonrouge.com/test/wagner.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>wagner</title>
<script type="text/javascript">
function getCheckedValue(radioObj) {
if(!radioObj) {
return "";
}
var radioLength = radioObj.length;
if(radioLength == undefined) {
if(radioObj.checked) {
return radioObj.value;
}
else {
return "";
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
function greyOut(){
var cname="greyed";
var list=document.getElementsByTagName('ol');
var olinks=list[0].getElementsByTagName('li');
var llen=olinks.length;
for(i=0; i<llen; i++) {
olinks[i].className=olinks[i].className.replace(new RegExp(" "+cname+"\\b"), "");
}
var greyRules=[];
greyRules[9]=[];
greyRules[10]=[];
greyRules[1]=["y",[2,3,4,5,6,7,8,9,10]];
greyRules[2]=["y",[1,2,3,4,5,6,7,8,]];
greyRules[3]=["y",[1,3,6,7,8,9,10]];
greyRules[4]=["y",[1,2,3,4,5,6,8,9,10]];
greyRules[5]=["y",[3,6,7,8,9,10]];
greyRules[6]=["y",[3,6,7,8,9,10]];
greyRules[7]=["y",[5,6,7,8,9,10]];
greyRules[8]=["n",[8]];
greyRules[9][0]=["y",[1,2,3,4,8,10]];
greyRules[9][1]=["n",[6,7,8,9]];
greyRules[9][2]=["d",[1,2,3,4,5,6,7,9,10]];
greyRules[10][0]=["y",[1,2,3,4,5,6,9]];
greyRules[10][1]=["n",[7,8,10]];
greyRules[11]=["y",[7]];
var elsToGrey=[];
var len=greyRules.length;
for(j=1; j<len; j++) {
var nam="i"+j;
var radiov=document.getElementsByName("i"+j);
var cValue=getCheckedValue(radiov);
var grjlen=greyRules[j].length;
if(grjlen>1) {
for (m=0; m<grjlen; m++) {
if(greyRules[j][m][0]==cValue) {
elsToGrey.push(greyRules[j][m][1]);
}
}
}
if(greyRules[j][0]==cValue) {
elsToGrey.push(greyRules[j][1]);
}
}
var elslen=elsToGrey.length;
for (n=0; n<elslen; n++) {
if(elsToGrey[n]) {
var thiselarraylen=elsToGrey[n].length;
for (p=0; p<thiselarraylen; p++) {
var linkno=elsToGrey[n][p]-1;
var rE = new RegExp("(^|\\s)" + cname + "(\\s|$)");
if (!rE.test(olinks[linkno].className)) {
olinks[linkno].className+=" "+cname;
}
}
}
}
}
window.onload=function(){
var inputs=document.getElementsByTagName("input");
var len=inputs.length;
for(i=0; i<len; i++) {
inputs[i].onclick=greyOut;
}
greyOut();
}
</script>
<style type="text/css">
.greyed a {
color:gray;
}
</style>
</head>
<body>
<div style="float: left; width: 60%;">
<form id="form1" name="form1" method="post" action="">
<ul type="disc">
<li>Will
you be measuring stucco, plaster, drywall, tile, shingles, roofing,
linoleum, or other non-wood materials (excluding concrete)? [Yes – BI
2200] <br>
<label>
<input name="i1" id="i1y" value="y" type="radio">
Yes</label>
<label>
<input name="i1" id="i1n" value="n" type="radio">
No</label>
</li>
<li>Will you be measuring concrete? [Yes - C575, or Rapid RH product line]<br>
<label>
<input name="i2" id="i2y" value="y" type="radio">
Yes</label>
<label>
<input name="i2" id="i2n" value="n" type="radio">
No</label>
</li>
<li>Do
you need an extended specific gravity range (.20-1.0 instead of
.30-.70). (Some exotic woods require this.) [Yes – MMC 220, MMI 1100,
BI 2200]<br>
<label>
<input name="i3" id="i3y" value="y" type="radio">
Yes</label>
<label>
<input name="i3" id="i3n" value="n" type="radio">
No</label>
</li>
<li>Do you need to measure surface moisture? (For testing waterborne finishes.) [Yes – L607]<br>
<label>
<input name="i4" id="i4y" value="y" type="radio">
Yes</label>
<label>
<input name="i4" id="i4n" value="n" type="radio">
No</label>
</li>
<li>Do you need .1 MC (digital) precision? [Yes – MMC 210, MMC 220, MMI 1100, BI 2200]<br>
<label>
<input name="i5" id="i5y" value="y" type="radio">
Yes</label>
<label>
<input name="i5" id="i5n" value="n" type="radio">
No </label>
</li>
<li>Do you need to be able to freeze a reading on the display? [Yes – MMC 210, MMC 220, MMI 1100, BI 2200]<br>
<label>
<input name="i6" id="i6y" value="y" type="radio">
Yes</label>
<label>
<input name="i6" id="i6n" value="n" type="radio">
No</label>
</li>
<li>Do
Species Settings need to be programmable, or is using a species
correction chart acceptable? [Programmable – MMC 205, MMC 210, MMC 220,
MMI 1100]<br>
<label>
<input name="i7" id="i7y" value="y" type="radio">
Yes</label>
<label>
<input name="i7" id="i7n" value="n" type="radio">
No</label>
</li>
<li>Is
an MC Range of 4% - 22% acceptable, or is 5% - 20% necessary? [4% - 22%
- all are acceptable; 5% - 20% - all but L609 are acceptable]<br>
<label>
<input name="i8" id="i8y" value="y" type="radio">
4% - 22%</label>
<label>
<input name="i8" id="i8n" value="n" type="radio">
5% - 20%</label>
</li>
<li>Is
an Analog, Digital, or LED display necessary? [Analog – C575, L606,
L607; Digital – MMC 205, MMC 210, MMC 220, MMI 1100, BI 2200; LED –
L609]<br>
<label>
<input name="i9" id="i9y" value="y" type="radio">
Analog</label>
<label>
<input name="i9" id="i9n" value="n" type="radio">
Digital</label>
<input name="i9" id="i9d" value="d" type="radio">
LED
</li>
<li>Do
you require ½ inch or ¾ inch measurement depth, or does it matter? [½
inch – L607, L609; ¾ inch - C575, L606, MMC 205, MMC 210, MMC 220, MMI
1100, BI 2200]<br>
<label>
<input name="i10" id="i10y" value="y" type="radio">
1/2 inch</label>
<label>
<input name="i10" id="i10n" value="n" type="radio">
3/4 inch</label>
<label>
<input name="i10" id="i10o" value="o" type="radio">
Doesn't Matter</label>
</li>
<li>Will you be measuring rough lumber? [Yes – exclude L607]<br>
<label>
<input name="i11" id="i11y" value="y" type="radio">
Yes</label>
<label>
<input name="i11" id="i11n" value="n" type="radio">
No</label>
</li>
</ul>
</form>
</div>
<ol style="float: right;">
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=19">MMC 210 Digital Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=20">MMC 220 Extended Range</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=21">MMC 205 Digital Shopline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=22">MMI 1100 Data Collection</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=18">BI 2200 Basic Inspection</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=14">L606 Analog Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=15">L607 Dual Depth Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=16">L609 Narrow Reading Shopline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=17">C575 Concrete Analog</a></li>
<li><a href="http://www.wagnermeters.com/concretemoisture.php">Rapid RH Relative Humidity Probes</a></li>
</ol>
</body></html>
I hope that helps. :)
realitybend
07-06-2009, 09:53 PM
Thank you, very much. By the way, I like your website (http://www.bonrouge.com)!
realitybend
07-07-2009, 10:40 AM
I just discovered that right now, it works in IE, but not FF. It greys out properly, but doesn't un-grey it when the other option is selected.
By the way, I'm reluctant to ask for anything else, since you've helped me so much already, but I'm thinking about several design changes that I'm not sure how to implement. I only want one question to be displayed at a time, with the user having the option to go to the next or previous question, and with the option to jump to question number whatever; so 1,2,3,4,5,6,7,8,9,10,11 would have to be there as links, I guess.
BonRouge
07-08-2009, 01:01 PM
Hi.
Maybe I'm misunderstanding you (more than likely), but It seems to work OK for me in Firefox.
Also, maybe it's just because I'm tired right now, but I don't quite understand what you mean in your second paragraph there. Could you spell it out for me? Thanks a lot.
realitybend
07-08-2009, 01:22 PM
Attached is a picture of what it does for me in FF; I pressed yes, than no, for question 1, but the links on the right are still grayed.
I'm going to try to throw together a sample image of what I was talking about in the 2nd paragraph.
Thanks again.
realitybend
07-08-2009, 01:34 PM
Here's basically what I was talking about. Only 1 question is displayed at a time, but you can go to the next or previous question.
Let me know if there's anything else I need to explain.
BonRouge
07-08-2009, 07:33 PM
I don't know what to say about Firefox, because - as I said - I'm having no problems with it. Is that screenshot from your page or from my test page (that I linked to)?
With the one-question-at-a-time thing, do you want the results of the other questions to show or not? I mean, after you click one 'yes' now, some are greyed out. In your new situation, do you want those to be 'ungreyed' (I think I just made that word up) when we look at a different question?
realitybend
07-09-2009, 10:28 AM
The screenshot was from your test page, but mine did the same thing.
With the questions - yes, I want all the results to show, so nothing would be "ungreyed". However, the user could press the "back" link and go back and change his answer, in that case, it would be ungreyed.
Serious thanks for your help.
BonRouge
07-09-2009, 11:14 PM
Hi there,
I think this is what you mean.
http://bonrouge.com/test/wagner-2.html
It's not perfect, but...
By the way, I found the problem you mentioned. The script did work OK for me in Firefox 3.5 (Linux). I checked it in Firefox 3 and I found the problem you mentioned. (Then, I fixed it).
I hope that helps.
BonRouge
07-10-2009, 07:33 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>wagner</title>
<script type="text/javascript">
function hidestories(id,tag) {
var els=document.getElementById(id).getElementsByTagName(tag);
for (j=0; j<els.length; j++) {
els[j].className+=" question";
els[j].id="question"+(j+1);
els[j].style.display="none";
}
}
function stories(id,tag,first) {
var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');
var cname="now";
for (i=0; i<thebuttons.length; i++) {
thebuttons[i].onclick=function() {
for(m=0;m<thebuttons.length;m++) {
thebuttons[m].className=thebuttons[m].className.replace(new RegExp(cname+"\\b"), "");
}
var asplit=(this.href).split("#",2);
var els=document.getElementById(id).getElementsByTagName(tag);
var elslen=els.length;
if(asplit[1]=='back') {
for (n=0; n<elslen; n++) {
if (els[n].style.display=='block') {
var thestory=(n>0)? els[n-1].id : els[n].id;
}
}
}
else if(asplit[1]=='next') {
for (n=0; n<elslen; n++) {
if (els[n].style.display=='block') {
var thestory=(n==elslen-1)? els[n].id : els[n+1].id;
}
}
}
else {
var thestory=asplit[1];
}
hidestories(id,tag);
var num=parseInt(thestory.substring(8));
thebuttons[num].className='now';
document.getElementById(thestory).style.display="block";
return false;
}
}
if (first==true) {
var firstone=document.getElementById(id).firstChild;
if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
firstone.style.display="block";
}
}
function getCheckedValue(radioObj) {
if(!radioObj) {
return false;
}
var radioLength = radioObj.length;
if(radioLength == undefined) {
if(radioObj.checked) {
return radioObj.value;
}
else {
return false;
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return false;
}
function greyOut(id,tag){
var cname="greyed";
var list=document.getElementById(id);
var olinks=list.getElementsByTagName(tag);
var llen=olinks.length;
for(i=0; i<llen; i++) {
olinks[i].className=olinks[i].className.replace(new RegExp(cname+"\\b"), "");
}
var greyRules=[];
greyRules[9]=[];
greyRules[10]=[];
greyRules[1]=["y",[2,3,4,5,6,7,8,9,10]];
greyRules[2]=["y",[1,2,3,4,5,6,7,8,]];
greyRules[3]=["y",[1,3,6,7,8,9,10]];
greyRules[4]=["y",[1,2,3,4,5,6,8,9,10]];
greyRules[5]=["y",[3,6,7,8,9,10]];
greyRules[6]=["y",[3,6,7,8,9,10]];
greyRules[7]=["y",[5,6,7,8,9,10]];
greyRules[8]=["n",[8]];
greyRules[9][0]=["y",[1,2,3,4,8,10]];
greyRules[9][1]=["n",[6,7,8,9]];
greyRules[9][2]=["d",[1,2,3,4,5,6,7,9,10]];
greyRules[10][0]=["y",[1,2,3,4,5,6,9]];
greyRules[10][1]=["n",[7,8,10]];
greyRules[11]=["y",[7]];
var elsToGrey=[];
var len=greyRules.length;
for(j=1; j<len; j++) {
var nam="i"+j;
var radiov=document.getElementsByName("i"+j);
var cValue=getCheckedValue(radiov);
var grjlen=greyRules[j].length;
if(grjlen>1) {
for (m=0; m<grjlen; m++) {
if(greyRules[j][m][0]==cValue) {
elsToGrey.push(greyRules[j][m][1]);
}
}
}
if(greyRules[j][0]==cValue) {
elsToGrey.push(greyRules[j][1]);
}
}
var elslen=elsToGrey.length;
for (n=0; n<elslen; n++) {
if(elsToGrey[n]) {
var thiselarraylen=elsToGrey[n].length;
for (p=0; p<thiselarraylen; p++) {
var linkno=elsToGrey[n][p]-1;
var rE = new RegExp("(^|\\s)" + cname + "(\\s|$)");
if (!rE.test(olinks[linkno].className)) {
olinks[linkno].className+=" "+cname;
}
}
}
}
}
window.onload=function(){
var qs="questions";
var ps="products";
var tag="li";
var inputs=document.getElementsByTagName("input");
var len=inputs.length;
for(i=0; i<len; i++) {
inputs[i].onclick=function() {greyOut(ps,tag);}
}
greyOut(ps,tag);
hidestories(qs,tag);
stories(qs,tag,true);
}
</script>
<style type="text/css">
#wrap {
width: 900px;
margin:auto;
}
#form1 {
float:left;
}
#thebuttons {
float:left;
}
.now {
border:1px solid grey;
}
.greyed a {
color:gray;
}
#products {
float:right;
}
#thebuttons {
list-style:none;
width:26em;
margin:auto;
}
#thebuttons li {
float:left;
width:2em;
font-weight:bold;
background-color:yellow;
padding:0.5em 0;
margin:0.5em auto;
text-align:center;
}
#questions {
width:30em;
margin:1em auto;
border:1px solid purple;
clear:left;
padding:1em;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="thebuttons">
<li><a href="#back"><<</a></li>
<li><a href="#question1">1</a></li>
<li><a href="#question2">2</a></li>
<li><a href="#question3">3</a></li>
<li><a href="#question4">4</a></li>
<li><a href="#question5">5</a></li>
<li><a href="#question6">6</a></li>
<li><a href="#question7">7</a></li>
<li><a href="#question8">8</a></li>
<li><a href="#question9">9</a></li>
<li><a href="#question10">10</a></li>
<li><a href="#question11">11</a></li>
<li><a href="#next">>></a></li>
</ul>
<form id="form1" name="form1" method="post" action="">
<ol id="questions">
<li>Will
you be measuring stucco, plaster, drywall, tile, shingles, roofing,
linoleum, or other non-wood materials (excluding concrete)? [Yes – BI
2200] <br>
<label>
<input name="i1" id="i1y" value="y" type="radio">
Yes</label>
<label>
<input name="i1" id="i1n" value="n" type="radio">
No</label>
</li>
<li>Will you be measuring concrete? [Yes - C575, or Rapid RH product line]<br>
<label>
<input name="i2" id="i2y" value="y" type="radio">
Yes</label>
<label>
<input name="i2" id="i2n" value="n" type="radio">
No</label>
</li>
<li>Do
you need an extended specific gravity range (.20-1.0 instead of
.30-.70). (Some exotic woods require this.) [Yes – MMC 220, MMI 1100,
BI 2200]<br>
<label>
<input name="i3" id="i3y" value="y" type="radio">
Yes</label>
<label>
<input name="i3" id="i3n" value="n" type="radio">
No</label>
</li>
<li>Do you need to measure surface moisture? (For testing waterborne finishes.) [Yes – L607]<br>
<label>
<input name="i4" id="i4y" value="y" type="radio">
Yes</label>
<label>
<input name="i4" id="i4n" value="n" type="radio">
No</label>
</li>
<li>Do you need .1 MC (digital) precision? [Yes – MMC 210, MMC 220, MMI 1100, BI 2200]<br>
<label>
<input name="i5" id="i5y" value="y" type="radio">
Yes</label>
<label>
<input name="i5" id="i5n" value="n" type="radio">
No </label>
</li>
<li>Do you need to be able to freeze a reading on the display? [Yes – MMC 210, MMC 220, MMI 1100, BI 2200]<br>
<label>
<input name="i6" id="i6y" value="y" type="radio">
Yes</label>
<label>
<input name="i6" id="i6n" value="n" type="radio">
No</label>
</li>
<li>Do
Species Settings need to be programmable, or is using a species
correction chart acceptable? [Programmable – MMC 205, MMC 210, MMC 220,
MMI 1100]<br>
<label>
<input name="i7" id="i7y" value="y" type="radio">
Yes</label>
<label>
<input name="i7" id="i7n" value="n" type="radio">
No</label>
</li>
<li>Is
an MC Range of 4% - 22% acceptable, or is 5% - 20% necessary? [4% - 22%
- all are acceptable; 5% - 20% - all but L609 are acceptable]<br>
<label>
<input name="i8" id="i8y" value="y" type="radio">
4% - 22%</label>
<label>
<input name="i8" id="i8n" value="n" type="radio">
5% - 20%</label>
</li>
<li>Is
an Analog, Digital, or LED display necessary? [Analog – C575, L606,
L607; Digital – MMC 205, MMC 210, MMC 220, MMI 1100, BI 2200; LED –
L609]<br>
<label>
<input name="i9" id="i9y" value="y" type="radio">
Analog</label>
<label>
<input name="i9" id="i9n" value="n" type="radio">
Digital</label>
<input name="i9" id="i9d" value="d" type="radio">
LED
</li>
<li>Do
you require ½ inch or ¾ inch measurement depth, or does it matter? [½
inch – L607, L609; ¾ inch - C575, L606, MMC 205, MMC 210, MMC 220, MMI
1100, BI 2200]<br>
<label>
<input name="i10" id="i10y" value="y" type="radio">
1/2 inch</label>
<label>
<input name="i10" id="i10n" value="n" type="radio">
3/4 inch</label>
<label>
<input name="i10" id="i10o" value="o" type="radio">
Doesn't Matter</label>
</li>
<li>Will you be measuring rough lumber? [Yes – exclude L607]<br>
<label>
<input name="i11" id="i11y" value="y" type="radio">
Yes</label>
<label>
<input name="i11" id="i11n" value="n" type="radio">
No</label>
</li>
</ol>
</form>
<ol id="products">
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=19">MMC 210 Digital Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=20">MMC 220 Extended Range</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=21">MMC 205 Digital Shopline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=22">MMI 1100 Data Collection</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=18">BI 2200 Basic Inspection</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=14">L606 Analog Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=15">L607 Dual Depth Proline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=16">L609 Narrow Reading Shopline</a></li>
<li><a href="http://www.wagnermeters.com/product.php?category=2&id=17">C575 Concrete Analog</a></li>
<li><a href="http://www.wagnermeters.com/concretemoisture.php">Rapid RH Relative Humidity Probes</a></li>
</ol>
</div>
</body>
</html>
vBulletin® v3.6.7, Copyright ©2000-2009, Jelsoft Enterprises Ltd.