Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 740
  • Last Modified:

Using checkboxes to enabled/disable other checkboxes

Here is my html code:

<table border=0><tr valign=top><td>
<input type="checkbox" name="strucalc7_cd" value=1></td><td colspan=2>
Purchase CD Only for $<? echo $cd_price;?>. (USPS Priority Mail Shipping)
</td></tr>
<tr valign=top><td>
<input type="checkbox" name="strucalc7_manual" value=1></td><td colspan=2>
Purchase Hard Copy of Manual for $<? echo $manual_first_price;?>. (FREE CD and 2nd Day Air Shipping included!)
</td></tr>
<tr valign=top><td></td><td><input type="checkbox" name="strucalc7_addmanual"></td><td>
Purchase
<INPUT TYPE="text" NAME="strucalc7_addmanual_no" size=3 class=input>  
additional manuals at $<? echo $manual_add_price; ?> each.</td></tr>
</td></tr></table>
<HR WIDTH=100% SIZE=1 NOSHADE>
<table border=0><tr valign=top><td>
<input type="checkbox" name="strucalc7_AKHI" value=1></td><td colspan=2>
I live in Alaska or Hawaii
</td></tr>
<tr valign=top><td></td><td>
<input type="checkbox" name="strucalc7_AKHI_2nd" value=1></td><td>
2nd Day Air ($25 Surcharge)
</td></tr>
<tr valign=top><td></td><td>
<input type="checkbox" name="strucalc7_AKHI_USPS" value=1></td><td>
USPS Priority Mail (No Surcharge!)
</td></tr>
</td></tr></table>

When the user opens the page I want strucalc7_cd, strucalc7_manual, and strucalc7_AKHI to all be enabled checkboxes and strucalc7_AKHI_2nd and strucalc7_AKHI_USPS to be disabled checkboxes

Then I want it to have the following functionality

Clicking strucalc7_cd disables all 4 other checkboxes if = 1 or sets back to default if = 0
Clicking strucalc7_manual disables strucalc7_cd if = 1 or returns to default if = 0
Clicking strucacl7_AKHI enables strucalc7_AKHI_2nd and strucalc7_AKHI_USPS if = 1 and returns to default if = 0

I am not very good at web based programming all my knowledge is in OOP? Hopefully there is an expert out there who can help me before I go crazy!
0
wilsoada
Asked:
wilsoada
1 Solution
 
wilsoadaAuthor Commented:
I realize i could do a verification on the submit code but my boss thinks it would look nicer if the buttons dynamically changed reflecting the user's selection :)
0
 
bubbledragonCommented:
You can use "disabled" to disable the checkbox and textbox by default
<input type="checkbox" name="strucalc7_addmanual" disabled>

And then, you can use javascript to handle the checkbox disable or not, just concept below,
Not fully code, because I not sure what checkbox you need to disable.

<script language="Javascript">
function f_checkbox(obj) {
var di = document.getElementsByTagName("input");

if (obj.name == "strucalc7_cd") {
      di["strucalc7_manual"].disabled    = (obj.checked ? true : false);
}

if (obj.name == "strucalc7_manual") {
      di["strucalc7_cd"].disabled           = (obj.checked ? true : false);
      di["strucalc7_addmanual"].disabled    = (obj.checked ? false : true);
      di["strucalc7_addmanual_no"].disabled = (obj.checked ? false : true);
}

}
</script>

' tigger the function onClick event
<input type="checkbox" name="strucalc7_cd" value=1 onClick="f_checkbox(this)">
0
 
jtittlerCommented:
This is not difficult to do with a smidge of client side coding in Javascript. It can be done in VBScript as well, although the syntax is different. I try to avoid VBScript because it's not a W3C standard.

Write a function to toggle checkboxes something like the following. I didn't test the code, there may be bugs, but it gets the point across.

<script lang="javascript">

function ToggleCheckBox(checkBoxID)
{
    var chkbox = document.getElemntById(checkBoxID);
    if(chkbox==null) {return;}

    chkbox.checked = !chkbox.checked;
}

Optionally you could write a function to specifically set the value of the check box to whatever you want.

function CheckTheCheckBox(checkBoxID, bChecked)
{
    var chkbox = document.getElementById(checkBoxID);
    if(chkbox==null) {return;}

    chkbox.checked = bChecked;
}

These functions are good prototypes for setting whether a checkbox is enabled or disabled as well. Just replace chkbox.checked with chkbox.disabled.
Now just write your function that uses these functions:

function Disable4Buttons()
{
    DisableCheckBox("chk1", true);
    DisableCheckBox("chk2", true);
    ...
}

</script>

You should get the idea. There are many fine primers on Javascript on the web. Look them up. I highly recommend O'Reilly's Javascript: The Definitive Guide as a book to aquire for your library.

I hope this helps.

Julie
0
 
gcmachelCommented:
this could be an solution:

<html>
<head>
 <script language="javascript">
   function disable4(){
    if (document.frm1.strucalc7_cd.checked){
       document.frm1.strucalc7_manual.disabled = true;
       document.frm1.strucalc7_addmanual.disabled = true;
       document.frm1.strucalc7_AKHI.disabled = true;
    }
   else{
        document.frm1.strucalc7_manual.disabled = false;
        document.frm1.strucalc7_addmanual.disabled = false;
        document.frm1.strucalc7_AKHI.disabled = false;
    }

   }
      function disable1(){
       if (document.frm1.strucalc7_manual.checked){
          document.frm1.strucalc7_cd.disabled = true;
       }
      else{
           document.frm1.strucalc7_cd.disabled = false;
       }

   }
   function disable2(){
         if (document.frm1.strucalc7_AKHI.checked){
              document.frm1.strucalc7_AKHI_2nd.disabled = true;
              document.frm1.strucalc7_AKHI_USPS.disabled = true;
         }
        else{
        document.frm1.strucalc7_AKHI_2nd.disabled = false;
        document.frm1.strucalc7_AKHI_USPS.disabled = false;
         }

      }

 </script>
</head>

<body>
<form name="frm1">
<table border=0><tr valign=top><td>
<input type="checkbox" name="strucalc7_cd" onclick="disable4();" value=1></td><td colspan=2>
Purchase CD Only for $<? echo $cd_price;?>. (USPS Priority Mail Shipping)
</td></tr>
<tr valign=top><td>
<input type="checkbox" name="strucalc7_manual" onclick="disable1();" value=1></td><td colspan=2>
Purchase Hard Copy of Manual for $<? echo $manual_first_price;?>. (FREE CD and 2nd Day Air Shipping included!)
</td></tr>
<tr valign=top><td></td><td><input type="checkbox" name="strucalc7_addmanual"></td><td>
Purchase
<INPUT TYPE="text" NAME="strucalc7_addmanual_no" size=3 class=input>
additional manuals at $<? echo $manual_add_price; ?> each.</td></tr>
</td></tr></table>
<HR WIDTH=100% SIZE=1 NOSHADE>
<table border=0><tr valign=top><td>
<input type="checkbox" name="strucalc7_AKHI" onclick="disable2();" value=1></td><td colspan=2>
I live in Alaska or Hawaii
</td></tr>
<tr valign=top><td></td><td>
<input type="checkbox" name="strucalc7_AKHI_2nd" disabled value=1></td><td>
2nd Day Air ($25 Surcharge)
</td></tr>
<tr valign=top><td></td><td>
<input type="checkbox" name="strucalc7_AKHI_USPS" disabled value=1></td><td>
USPS Priority Mail (No Surcharge!)
</td></tr>
</td></tr></table>
</form>
</body>
</html>

Regards - G.
0
 
wilsoadaAuthor Commented:
That was a great answer thank you very much. I just had to modify the code a bit to make it work the way I wanted and I was off. A+++++++
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now