newbie - onclick disable checkbox, change row color

Discussion in 'Javascript' started by Steve, Aug 22, 2005.

  1. Steve

    Steve Guest

    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.
    Steve, Aug 22, 2005
    #1
    1. Advertising

  2. Steve

    Lee Guest

    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]===box) {
    break;
    }
    }
    // Set the disabled attribute of the other two checkboxes that
    // have the same index.
    box.form.alpha.disabled=box.checked;
    box.form.beta.disabled=box.checked;
    // Set the background color of the <TR> element whose name is
    // "row<thisIndex>".
    if(box.checked) {
    document.getElementById("row"+i).style.backgroundColor="yellow";
    } else {
    document.getElementById("row"+i).style.backgroundColor="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>
    Lee, Aug 22, 2005
    #2
    1. Advertising

  3. Steve

    Mick White Guest

    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
    Mick White, Aug 22, 2005
    #3
  4. Steve

    Steve Guest

    Thanks MIck. I'll start on the help you've given me and then come back
    again.

    Thank you very much for your help.
    Steve, Aug 22, 2005
    #4
  5. Steve

    Steve Guest

    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.
    Steve, Aug 22, 2005
    #5
  6. Steve

    Steve Guest

    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.
    Steve, Aug 22, 2005
    #6
  7. Steve

    Lee Guest

    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?
    Lee, Aug 22, 2005
    #7
  8. Steve

    Steve Guest

    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.
    Steve, Aug 23, 2005
    #8
  9. Steve

    Lee Guest

    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]===box) {
    break;
    }
    }
    // Set the disabled attribute of the other two checkboxes that
    // have the same index.
    box.form.alpha.disabled=box.checked;
    box.form.beta.disabled=box.checked;
    // Set the background color of the <TR> element whose name is
    // "row<thisIndex>".
    if(box.checked) {
    document.getElementById("row"+i).style.backgroundColor="yellow";
    } else {
    document.getElementById("row"+i).style.backgroundColor="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>
    Lee, Aug 23, 2005
    #9
  10. Steve

    Steve Guest

    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!
    Steve, Aug 23, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U3RldmUgV29uZGVyZnVs?=

    Change disable color of a checkbox list

    =?Utf-8?B?U3RldmUgV29uZGVyZnVs?=, Nov 11, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    5,433
    =?Utf-8?B?dGlta2xpbmc=?=
    Nov 12, 2005
  2. =?Utf-8?B?aWdvdHlvdXJkb3RuZXQ=?=

    change row color of empty row

    =?Utf-8?B?aWdvdHlvdXJkb3RuZXQ=?=, Oct 19, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    440
    Walter Wang [MSFT]
    Oct 24, 2006
  3. Kamaljeet Saini
    Replies:
    0
    Views:
    380
    Kamaljeet Saini
    Feb 13, 2009
  4. Terje
    Replies:
    5
    Views:
    367
    Evertjan.
    Nov 18, 2004
  5. apparker
    Replies:
    10
    Views:
    355
    apparker
    Apr 3, 2007
Loading...

Share This Page