Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable all other checkboxes when this checkbox checked?

    I have a form containing a bunch of input fields (many are checkboxes) and am having trouble trying to figure out how to do the following:

    Within all checkboxes, there are 4 of particular interest. When the first is selected - the other 3 should be disabled (not all checkboxes in the form, just these 3).

    I figure I need some way to dientify these 3 and then call a function when the first is clicked.

    But how do I identify them without using their input name (which is dynamically generated and used for something else)

    Does anyone have any suggestions or examples of anything similar?
    Last edited by quadrant6; 04-17-2005 at 02:30 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>

    <
    body onload="f7_DisableCBGroup()" >

    <
    table width="300" cellpadding="0" cellspacing="0" border="0" style="position:relative;left:30px;" >
      <
    tr>
        <
    td width="50%">
    Group 1<br>
    <
    span title="Group1" >
    <
    input title="Group 1 A" type="checkbox" name="" checked=true ><br>
    <
    input title="Group 1 B" type="checkbox" name=""><br>
    <
    input title="Group 1 C" type="checkbox" name=""><br>
    </
    span>
    <
    span title="Group1f7_Master" >
    <
    input title="Group 1 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
    </
    span>
        </
    td>
        <
    td width="50%">
    Group 2<br>
    <
    span title="Group2" >
    <
    input title="Group 2 A" type="checkbox" name="" checked=true ><br>
    <
    input title="Group 2 B" type="checkbox" name=""><br>
    <
    input title="Group 2 C" type="checkbox" name=""><br>
    </
    span>
    <
    span title="Group2f7_Master" >
    <
    input title="Group 2 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
    </
    span>
        </
    td>
      </
    tr>
    </
    table>
    <
    br>
    <
    br>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Form Compendium f5 (17-04-2005)
    // Disable CB Group
    // by Vic Phillips [url]http://www.vicsjavascripts.org.uk[/url]

    // Change a group of Check Boxes to disabled=true or disabled=false;

    // Application Notes

    // The check box group is definded by the check boxes with a parent of the same title
    // A check box with a parent node of the group title suffixed with 'f7_Master'
    // is used to set the disable status of the other check boxes
    // Example HTML Code for one group
    // <span title="Group1" >
    // <input title="Group 1 A" type="checkbox" name="" checked=true ><br>
    // <input title="Group 1 B" type="checkbox" name=""><br>
    // <input title="Group 1 C" type="checkbox" name=""><br>
    // </span>
    // <span title="Group1f7_Master" >
    // <input title="Group 1 Master" type="checkbox" name=""><span id="fredTxt" >Master</span><br>
    // </span>

    // Each group is initialised from a <body> onload event
    // <body onload="f7_DisableCBGroup();" >
    // where

    // All variable, function etc. names are prefixed with 'f7_' to minimise conflicts with other javascripts


    var f7_cks;

    function 
    f7_DisableCBGroup(f7_cb){
     
    f7_cks=document.getElementsByTagName('INPUT');
     for (
    f7_0=0;f7_0<f7_cks.length;f7_0++){
      if (
    f7_cks[f7_0].type=='checkbox'){
       if (
    f7_cks[f7_0].parentNode.title.match('f7_Master')){
        
    f7_Disable(f7_cks[f7_0])
        
    f7_cks[f7_0].onclick=function(){ f7_Disable(this); }
       }
      }
     }
    }

    function 
    f7_Disable(f7_obj){
     for (
    f7_1=0;f7_1<f7_cks.length;f7_1++){
      if (
    f7_cks[f7_1].parentNode.title==f7_obj.parentNode.title.replace('f7_Master','')){
       if (
    f7_obj.checked){
        
    f7_cks[f7_1].setAttribute('disabled',true)
       }
       else {
        
    f7_cks[f7_1].removeAttribute('disabled')
       }
      }
     }
    }


    //-->
    </script>
    </body>

    </html> 
    I am putting together a Compendium of form utilities

    for a preview see
    http://www.vicsjavascripts.org.uk/Fo...Compendium.htm
    Last edited by vwphillips; 04-17-2005 at 10:01 AM.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that seems to work pretty well.

    1 small thing is that when you click the master (the others become disabled but not unchecked). It may be nice for user feedback if they are unchecked as well as being disabled.

    I attemped to do this by adding (bold):

    function f7_Disable(f7_obj){
    for (f7_1=0;f7_1<f7_cks.length;f7_1++){
    if (f7_cks[f7_1].parentNode.title==f7_obj.parentNode.title.replace('f7_Master','')){
    if (f7_obj.checked){
    f7_cks[f7_1].removeAttribute('checked')
    f7_cks[f7_1].setAttribute('disabled',true)
    }
    .. but it doesn't seem to work.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    f7_cks[f7_1].checked = false;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •