Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > newbie - onclick disable checkbox, change row color

Reply
Thread Tools

newbie - onclick disable checkbox, change row color

 
 
Steve
Guest
Posts: n/a
 
      08-22-2005
I have a form with multiple rows. Each row has 3 checkboxes in 3
separate columns. I want to disable (greyout) the 2 checkboxes in the
first 2 columns when the third one is clicked. And to enable them again
when the third one is unclicked.

However, the difficulty here is that each column of checkboxes has the
same name (this has to remain so). So if I write a function asking for
a specific fieldname to be disable on the event of a click, as there
are multiple fieldnames, this does not work.

Can somebody help me with this?

I would also ideally like the color of the row to change when the 3rd
column checkbox is clicked.

 
Reply With Quote
 
 
 
 
Lee
Guest
Posts: n/a
 
      08-22-2005
Steve said:
>
>I have a form with multiple rows. Each row has 3 checkboxes in 3
>separate columns. I want to disable (greyout) the 2 checkboxes in the
>first 2 columns when the third one is clicked. And to enable them again
>when the third one is unclicked.
>
>However, the difficulty here is that each column of checkboxes has the
>same name (this has to remain so). So if I write a function asking for
>a specific fieldname to be disable on the event of a click, as there
>are multiple fieldnames, this does not work.
>
>Can somebody help me with this?
>
>I would also ideally like the color of the row to change when the 3rd
>column checkbox is clicked.



If I understand you correctly, the fact that the checkboxes in each column have
the same name works to your advantage:


<html>
<head>
<script type="text/javascript">
function disableRow(box) {
// Find the index of "this" checkbox by comparing the control
// to all elements sharing its name. We assume that there are
// more than one, so that it actually has an index.
for(i=0;i<box.form.elements[box.name].length;i++) {
if(box.form.elements[box.name][i]===box) {
break;
}
}
// Set the disabled attribute of the other two checkboxes that
// have the same index.
box.form.alpha[i].disabled=box.checked;
box.form.beta[i].disabled=box.checked;
// Set the background color of the <TR> element whose name is
// "row<thisIndex>".
if(box.checked) {
document.getElementById("row"+i).style.backgroundC olor="yellow";
} else {
document.getElementById("row"+i).style.backgroundC olor="white";
}
}
</script>
</head>
<body>
<form>
<table>
<tr id="row0">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row1">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row2">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row3">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row4">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
</table>
</body>
</html>

 
Reply With Quote
 
 
 
 
Mick White
Guest
Posts: n/a
 
      08-22-2005
Steve wrote:

> I have a form with multiple rows. Each row has 3 checkboxes in 3
> separate columns. I want to disable (greyout) the 2 checkboxes in the
> first 2 columns when the third one is clicked. And to enable them again
> when the third one is unclicked.
>
> However, the difficulty here is that each column of checkboxes has the
> same name (this has to remain so). So if I write a function asking for
> a specific fieldname to be disable on the event of a click, as there
> are multiple fieldnames, this does not work.
>
> Can somebody help me with this?
>
> I would also ideally like the color of the row to change when the 3rd
> column checkbox is clicked.
>


In a case such as yours, js provides an array-like collection.

checkboxName[0], checkboxName[1], checkboxName[2]

You have problems with terminology, checkboxes are either checked or
unchecked. What you need is an onclick event handler on the third cbox.
Pseudo code:

onclick="with(this.form){
checkboxName[0].disabled=this.checked;
checkboxName[1].disabled=this.checked}"

Note that the working checkbox may not be "checkboxName[2]", adjust
accordingly.

I would need to see your code in order to effect a colour change in the tr.

Mick

 
Reply With Quote
 
Steve
Guest
Posts: n/a
 
      08-22-2005
Thanks MIck. I'll start on the help you've given me and then come back
again.

Thank you very much for your help.

 
Reply With Quote
 
Steve
Guest
Posts: n/a
 
      08-22-2005
Thank you Lee.

As I said to Mick, I'll start integrating your code and experimenting
and tell you how I got on.

I really appreciate your help.

 
Reply With Quote
 
Steve
Guest
Posts: n/a
 
      08-22-2005
Lee, I have copied and pasted your code in a blank html page and I am
getting javascript errors. I shouldn't need to substitue anything
right, just to test your code on its own?

Steve.

 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      08-22-2005
Steve said:
>
>Lee, I have copied and pasted your code in a blank html page and I am
>getting javascript errors. I shouldn't need to substitue anything
>right, just to test your code on its own?


It works for me in Firefox and IE6 when copied and pasted.
Possibly your newsreader wrapped some lines?

 
Reply With Quote
 
Steve
Guest
Posts: n/a
 
      08-23-2005
Lee I don't know how to thank you enough. I integrated your code in my
asp application and it works very nicely. Thank you very much!

The errors I was getting were due to copying the code from Google
Groups which very strangely has turned a small i into a capital I (and
other small changes!) Compare // "row<thisIndex>" in Developersdex and
Google though it is only a comment and not part of the script itself.

I program in vbscript, but read up on javascript a bit further for this
problem. I don't like including code which I don't fully understand. So
finally can I ask you to explain some bits of the syntax for a newbie
like me:

The function disableRow as I understand it is first looping through the
form elements until you find which row it's on. Once you've found it
you disable the two checkboxes on the same row and set background color
for the row depending on whether box is checked or not.

1. I don't have a grasp of the 'index' concept. i.e the index you are
looping through to find the row you are on. Are you basically using the
row ids to achieve this or is this index independent of the row ids? I
guess I am asking if it's not the row ids where has this index come
from?

2. I thought that '==' was the notation for an equality condition in
javascript, can you explain the three equal signs you have used '==='?

3. Is it possible to include onmouseover and onmouseout color change
events for the rows, i.e the row color changes onmouseover and then
onmouseout but NOT when 3rd column checkbox has been clicked. i.e the
real question is How can the color which is applied by the 3rd column
check box being clicked stay put regardless of a mouseout or mouseover
color change?

Sorry to be so much trouble...feel free to point me to some javascript
reading resources if you feel the questions are a bit too elementary.

 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      08-23-2005
Steve said:

>1. I don't have a grasp of the 'index' concept. i.e the index you are
>looping through to find the row you are on. Are you basically using the
>row ids to achieve this or is this index independent of the row ids? I
>guess I am asking if it's not the row ids where has this index come
>from?


When you have several form controls that have the same name, they
are accessible as an Array, so the multiple instances of "alpha"
can be referred to as alpha[0], alpha[1], etc. This is separate
from the row id.

>2. I thought that '==' was the notation for an equality condition in
>javascript, can you explain the three equal signs you have used '==='?


I could have used "==" in this case, but "===" is a bit safer when
comparing complex Objects. It eliminates the chance that the two
objects only appear to be identical after a type conversion.

http://docs.sun.com/source/816-6408-10/ops.htm#1060974

>3. Is it possible to include onmouseover and onmouseout color change
>events for the rows, i.e the row color changes onmouseover and then
>onmouseout but NOT when 3rd column checkbox has been clicked. i.e the
>real question is How can the color which is applied by the 3rd column
>check box being clicked stay put regardless of a mouseout or mouseover
>color change?


Extract the row number from the id of the row that fired the event
and check the disabled attribute of one of the checkboxes that has
that row number as its index:


<html>
<head>
<script type="text/javascript">

function hilight(row,state) {
var stateColor=["white","green"];
var rowNum=row.id.substr(3); // ignore first three characters
if(!document.forms[0].alpha[rowNum].disabled) {
row.style.backgroundColor=stateColor[state];
}
}

function disableRow(box) {
// Find the index of "this" checkbox by comparing the control
// to all elements sharing its name. We assume that there are
// more than one, so that it actually has an index.
for(i=0;i<box.form.elements[box.name].length;i++) {
if(box.form.elements[box.name][i]===box) {
break;
}
}
// Set the disabled attribute of the other two checkboxes that
// have the same index.
box.form.alpha[i].disabled=box.checked;
box.form.beta[i].disabled=box.checked;
// Set the background color of the <TR> element whose name is
// "row<thisIndex>".
if(box.checked) {
document.getElementById("row"+i).style.backgroundC olor="yellow";
} else {
document.getElementById("row"+i).style.backgroundC olor="white";
}
}

</script>
</head>
<body>
<form>
<table>
<tr id="row0" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row1" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row2" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row3" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row4" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
</table>
</body>
</html>

 
Reply With Quote
 
Steve
Guest
Posts: n/a
 
      08-23-2005
Thanks for everything Lee. Understood.

I'll be doing more reading on javascript now I think as I have realized
it can be very useful.

When I finish this application (which is going online for the public
for free) I'll show it to you, for you to see what it's being used for
in practice.

Thank you again!

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
change text color onclick, and change it back - will post to DB apparker Javascript 10 04-03-2007 01:57 PM
change row color of empty row =?Utf-8?B?aWdvdHlvdXJkb3RuZXQ=?= ASP .Net 3 10-24-2006 12:11 PM
GridView: Row background color= red if row ID = 3 G. Whiz ASP .Net 1 02-24-2006 03:52 PM
ok I can do a totals row but how about a percentage row after each data row D ASP .Net Datagrid Control 0 05-23-2005 04:10 PM
Re: Can I change the background color of elements onclick events? brucie HTML 2 01-01-2004 10:28 AM



Advertisments