q - how to reenable disabled checkboxes in a form

Discussion in 'Javascript' started by shree, Jul 14, 2005.

  1. shree

    shree Guest

    Hello everyone,

    I'm writing a form which will have a group of checkboxes. When user
    selects one checkbox, it will automatically disable the rest of the
    checkboxes in the group. I'm able to develop this function.

    I also would like to provide a 'clear' button which should trigger via
    onClick. When 'clear' button is clicked, it should clear 'checked'
    checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
    to get this function to work and would appreciate if anyone can offer
    suggestion and/or an example. Thank you for taking the time.

    Best wishes,
    Shree

    I have posted a link to try out and the code below.

    -----
    http://www.open365test.net/Ex_Checkbox.html
    -----
    <html>
    <head>
    <title>Re-enable Checkbox</title>
    <meta http-equiv="content-type" content="text/html;
    charset=iso-8859-1">
    <script type="text/javascript">

    function ckGrp(ck){

    var ck_arr=document.getElementsByName(ck.name);
    var ca_ln=ck_arr.length;
    if(ck.checked){
    for(var i=0;i<ca_ln;i++){
    if(ck_arr.id!=ck.id)ck_arr.disabled=true;
    }
    }else{
    for(var i=0;i<ca_ln;i++){
    ck_arr.disabled=false;
    }
    }
    }

    function ResetGrp(ck){
    //alert("ck name is " + ck.name);
    alert('Got Here');
    var ck_arr=document.getElementsByName(ck.name);
    var ca_ln=ck_arr.length;
    for(var i=0;i<ca_ln;i++){
    ck_arr.disabled=false;
    }
    }

    function showAlert() {
    alert('Got Here');
    }

    </script>

    </head>
    <body >

    <form name = "FormName" action="">

    <table width="700" border="0">

    <tr>
    <td width="18"><div align="left"></div></td>
    <td width="169"><div align="left">Group</div></td>
    </tr>

    <!--1st row -->
    <tr>
    <td><div align="left"></div></td>
    <td><div align="left">
    <input type="checkbox" id="ck1" name="Group" value = "Option1"
    onclick="ckGrp(this)" />
    Option1</div></td>
    </tr>

    <!--2nd row -->
    <tr>
    <td><div align="left"></div></td>
    <td><div align="left">
    <input type="checkbox" id="ck2" name="Group" value = "Option2"
    onclick="ckGrp(this)" />
    Option2</div></td>
    </tr>


    <!--3rd row -->
    <tr>
    <td><div align="left"></div></td>
    <td><div align="left">
    <input type="checkbox" id="ck3" name="Group" value = "Option3"
    onclick="ckGrp(this)" />
    Option3</div></td>
    </tr>

    <tr>
    <td></td>
    <td></td>
    </tr>

    <tr>
    <!--<td><input type="button" value="Click here"
    onClick="showAlert();"></td>-->

    <td><input type="button" id="ck5" value="Clear" name="Group2"
    onClick="ResetGrp();"></td>
    <td><input type="submit" value="Submit" /></td>
    </tr>

    </table>

    </body>
    </html>
    shree, Jul 14, 2005
    #1
    1. Advertising

  2. shree

    ASM Guest

    shree wrote:
    > Hello everyone,
    >
    > I'm writing a form which will have a group of checkboxes. When user
    > selects one checkbox, it will automatically disable the rest of the
    > checkboxes in the group. I'm able to develop this function.
    >
    > I also would like to provide a 'clear' button which should trigger via
    > onClick. When 'clear' button is clicked, it should clear 'checked'
    > checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
    > to get this function to work and would appreciate if anyone can offer
    > suggestion and/or an example. Thank you for taking the time.


    function ResetGrp(ck){
    var ck_arr = (document.getElmentById && document.getElementsByName)?
    document.getElementsByName(ck) :
    document.forms['FormName'].elements[ck];
    for(var i=0;i<ck_arr.length;i++){
    ck_arr.disabled=false;
    ck_arr.checked=false;
    }
    }


    <input type="button" id="ck5" value="Clear" name="Group2"
    onClick="ResetGrp('Group');">



    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Jul 14, 2005
    #2
    1. Advertising

  3. shree

    McKirahan Guest

    "shree" <> wrote in message
    news:...
    > Hello everyone,
    >
    > I'm writing a form which will have a group of checkboxes. When user
    > selects one checkbox, it will automatically disable the rest of the
    > checkboxes in the group. I'm able to develop this function.
    >
    > I also would like to provide a 'clear' button which should trigger via
    > onClick. When 'clear' button is clicked, it should clear 'checked'
    > checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
    > to get this function to work and would appreciate if anyone can offer
    > suggestion and/or an example. Thank you for taking the time.
    >
    > Best wishes,
    > Shree
    >
    > I have posted a link to try out and the code below.
    >
    > -----
    > http://www.open365test.net/Ex_Checkbox.html


    [snip]

    So you want the look of checkboxes but the functionality of radio buttons.
    McKirahan, Jul 14, 2005
    #3
  4. shree

    McKirahan Guest

    "shree" <> wrote in message
    news:...
    > Hello everyone,
    >
    > I'm writing a form which will have a group of checkboxes. When user
    > selects one checkbox, it will automatically disable the rest of the
    > checkboxes in the group. I'm able to develop this function.
    >
    > I also would like to provide a 'clear' button which should trigger via
    > onClick. When 'clear' button is clicked, it should clear 'checked'
    > checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
    > to get this function to work and would appreciate if anyone can offer
    > suggestion and/or an example. Thank you for taking the time.
    >
    > Best wishes,
    > Shree


    [snip]

    Will this help? Watch for word-wrap.

    <html>
    <head>
    <title>Re-enable Checkbox</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function ckGrp(ck,mx){
    if(document.getElementById(ck.id).checked){
    for(var i=1;i<mx+1;i++){
    if (document.getElementById(ck.id).value !=
    document.getElementById("ck"+i).value) {
    document.getElementById("ck"+i).disabled=true;
    }
    }
    } else {
    for(var i=1;i<mx+1;i++){
    if (document.getElementById(ck.id).value !=
    document.getElementById("ck"+i).value) {
    document.getElementById("ck"+i).disabled=false;
    }
    }
    }
    }
    function ResetGrp(ck,mx){
    for(var i=1;i<mx+1;i++){
    document.getElementById(ck+i).checked=false;
    document.getElementById(ck+i).disabled=false;
    }
    }
    </script>
    </head>
    <body >
    <form name="FormName" action="">
    <table border="0" width="187">
    <tr>
    <td width="18">&nbsp;</td>
    <td width="169">Group</td>
    </tr>
    <!--1st row -->
    <tr>
    <td>&nbsp;</td>
    <td><input type="checkbox" id="ck1" name="ck1" value="Option1"
    onclick="ckGrp(this,3)" />Option1</td>
    </tr>
    <!--2nd row -->
    <tr>
    <td>&nbsp;</td>
    <td><input type="checkbox" id="ck2" name="ck2" value="Option2"
    onclick="ckGrp(this,3)" />Option2</td>
    </tr>
    <!--3rd row -->
    <tr>
    <td>&nbsp;</td>
    <td><input type="checkbox" id="ck3" name="ck3" value="Option3"
    onclick="ckGrp(this,3)" />Option3</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><input type="button" value="Clear" onClick="ResetGrp('ck',3);"></td>
    <td><input type="submit" value="Submit" /></td>
    </tr>
    </table>
    </body>
    </html>
    McKirahan, Jul 14, 2005
    #4
  5. shree

    McKirahan Guest

    "Danny" <> wrote in message
    news:1121306114.80bd55b3461ef1fdc7e8281df6f7a4a2@teranews...

    [snip]

    Danny, change your clock!
    McKirahan, Jul 14, 2005
    #5
  6. shree

    shree Guest

    shree, Jul 14, 2005
    #6
  7. shree <> wrote in message news:...
    > Hello everyone,
    >
    > I'm writing a form which will have a group of checkboxes. When user
    > selects one checkbox, it will automatically disable the rest of the
    > checkboxes in the group. I'm able to develop this function.
    >
    > I also would like to provide a 'clear' button which should trigger via
    > onClick. When 'clear' button is clicked, it should clear 'checked'
    > checkbox and re-enable disabled (grayed out) checkboxes.



    > <td><input type="button" id="ck5" value="Clear" name="Group2"
    > onClick="ResetGrp();"></td>
    > <td><input type="submit" value="Submit" /></td>


    If you write a function that takes a parameter, it's customary to pass it one:

    onClick="ResetGrp('Group');"

    Then the simplest change to the function you had, would be:

    function ResetGrp(ck)
    {
    var ck_arr=document.getElementsByName(ck);

    var ca_ln=ck_arr.length;

    for(var i=0; i<ca_ln; i++)
    {
    ck_arr.disabled=false;
    ck_arr.checked=false;
    }

    }

    A more universal way to assemble the array of the wanted elements would be:

    var ck_arr=[];

    for( var i=0, f=document.forms['FormName'], len=f.elements.length; i<len; i++ )
    if( f.elements.name==ck )
    ck_arr[ck_arr.length]=f.elements;


    Having said that, to me this looks more like a job for radio buttons...

    --
    Stephen Chalmers

    547265617375726520627572696564206174204F2E532E207265663A205451323437393134
    Stephen Chalmers, Jul 14, 2005
    #7
  8. On 14/07/2005 02:36, ASM wrote:

    [snip]

    > function ResetGrp(ck){
    > var ck_arr = (document.getElmentById && document.getElementsByName)?


    Whilst the getElementsByName method is technically more correct on the
    basis of the W3C DOM specifications, it will not be as easy to work with
    as any matching name, including non-form control elements (in HTML), and
    controls in multiple FORM elements will be returned. Unless you can make
    guarantees about the document, extra checks will be necessary. The
    behaviour of the elements collection, as 'defined' in DOM 0 is pretty
    universal.

    There is certainly no need to examine the getElementById method. It has
    absolutely no relevance to what you're trying to accomplish.

    [snip]

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
    Michael Winter, Jul 14, 2005
    #8
  9. shree

    ASM Guest

    Michael Winter wrote:
    > On 14/07/2005 02:36, ASM wrote:
    >
    >> function ResetGrp(ck){
    >> var ck_arr = (document.getElmentById && document.getElementsByName)?

    >
    > There is certainly no need to examine the getElementById method. It has
    > absolutely no relevance to what you're trying to accomplish.


    i.e. to tell NC4.5 : pass your way
    I'm sure NC unterstand that, contrary to gEBN

    am I wrong ?


    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Jul 14, 2005
    #9
  10. shree

    ASM Guest

    shree wrote:

    > In my real application, I had to clear (enable) two sets of checkboxes
    > and was able to do that using the examples you guys showed me. Here it
    > is
    >
    > http://www.open365test.net/Ex_Checkbox4.html


    As in my tests this do not work with iCab 3.0beta280
    but does in FF

    With NC4.5 it is of no importance : he can't disabled an input
    (but he'll surely cry 'there is an error')

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Jul 14, 2005
    #10
  11. shree

    Grant Wagner Guest

    "McKirahan" <> wrote in message
    news:...
    >
    > So you want the look of checkboxes but the functionality of radio
    > buttons.


    To the OP (and anyone else who wants to use checkboxes as radio
    buttons): Bad idea, no matter how cool you think they look:

    <url: http://www.useit.com/alertbox/20040927.html />

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jul 15, 2005
    #11
    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. Alvin Bruney [MVP]

    Re: Disabled panels reset checkboxes

    Alvin Bruney [MVP], Jul 28, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    353
    Alvin Bruney [MVP]
    Jul 28, 2004
  2. =?Utf-8?B?TWlrZSBEcmFwZXI=?=

    Checkboxes disabled at runtime

    =?Utf-8?B?TWlrZSBEcmFwZXI=?=, Apr 28, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    358
    =?Utf-8?B?TWlrZSBEcmFwZXI=?=
    Apr 28, 2005
  3. =?Utf-8?B?TWlrZSBEcmFwZXI=?=

    Checkboxes disabled at runtime

    =?Utf-8?B?TWlrZSBEcmFwZXI=?=, Apr 28, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    376
    =?Utf-8?B?TWlrZSBEcmFwZXI=?=
    Apr 28, 2005
  4. BillE
    Replies:
    2
    Views:
    484
    BillE
    Nov 13, 2007
  5. Replies:
    1
    Views:
    78
Loading...

Share This Page