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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2003
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question using checkboxes and radio buttons in forms

    hi all

    i just wanna ask if anyone can help me with the problem of enabling checkboxes when a related radio button is selected.

    i have 5 radio buttons and have 8 chekcboxes related to one of those radio buttons.
    if that radio button is selected i want all the diabled checkboxes to be enabled.

    does anyone has an idea how to do it?


  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, this script uses a lock image which is toggled by a checbox
    which locks a bunch of radio buttons
    <script>
    function Show_icing_lock()
    { if (document.icing_position.icinglock.checked)
    { icing_lock.innerHTML="<img src='hi_locked.gif'></img>";
    }
    else
    { icing_lock.innerHTML="<img src='hi_open.gif'></img>";
    }
    }
    </script>

    <form name="icing_position">
    <table border=4>
    <tr><td><font color="#000000"><B>ICING</B></td>
    <td><input type="checkbox" name="icinglock" checked='yes' onclick='javascript:Show_icing_lock();'><div id='icing_lock' style="position: relative; right: -20px; top: -20px;"><img src='hi_locked.gif' height=18 width=15></img></div></td>
    <td><input type="button" value=""></td>
    <td><input type="button" value=""></td>
    <td><input type="button" value=""></td>
    <td><input type="button" value=" Next " onClick="javascript:if (!document.icing_position.icinglock.checked) Next_icing();"></td>
    <td><input type="button" value="Previous" onClick="javascript:if (!document.icing_position.icinglock.checked) Previous_icing();"></td>
    <td><input type="button" value=" Reset " onClick="javascript:if (!document.icing_position.icinglock.checked) Icing_reset();">
    <input type="button" value=" Help " onClick="javascript:if (!document.icing_position.icinglock.checked) Icing_help();"></td>

    <tr>
    <td><font color="#000000">Position</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[8].checked=true;'><input type=radio value="excellent" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[8].checked=true} else {document.icing_position[8].checked=false};' onMouseover="showtip(this,event,icing_position_excellent)" onMouseout="hidetip()"><font color="#000000">excellent</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[9].checked=true;'><input type=radio value="very good" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[9].checked=true} else {document.icing_position[9].checked=false};' onMouseover="showtip(this,event,icing_position_verygood)" onMouseout="hidetip()"><font color="#000000">very good</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[10].checked=true;'><input type=radio value="ok" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[10].checked=true} else {document.icing_position[10].checked=false};' onMouseover="showtip(this,event,icing_position_ok)" onMouseout="hidetip()"><font color="#000000">ok</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[11].checked=true;'><input type=radio value="fair" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[11].checked=true} else {document.icing_position[11].checked=false};' onMouseover="showtip(this,event,icing_position_fair)" onMouseout="hidetip()"><font color="#000000">fair</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[12].checked=true;'><input type=radio value="poor" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[12].checked=true} else {document.icing_position[12].checked=false};' onMouseover="showtip(this,event,icing_position_poor)" onMouseout="hidetip()"><font color="#000000">poor</td>
    <td onclick='javascript:if (!document.icing_position.icinglock.checked) document.icing_position[13].checked=true;'><input type=radio value="missed" name="position" onclick='javascript:if (!document.icing_position.icinglock.checked) {document.icing_position[13].checked=true} else {document.icing_position[13].checked=false};' onMouseover="showtip(this,event,icing_position_missed)" onMouseout="hidetip()"><font color="#000000">missed</td>
    <td>
    </form>

    well that might be a bit hard to follow but it does what you want
    effectively ...
    you use an if statement in the onclick of the button you want to be lockable or in this case on the <td> containing the button, this allows the user to click roughly the button and it will work if it is unlocked

    alternatively you could use outerHTML to toggle the visibility of the buttons you want to disable.. but ..i found this tricky to get working if the buttons are in a table..

    ez
    Last edited by ez4ne12c; 01-14-2003 at 03:02 AM.
    Animation Rule #64
    Poor quality images are often artistic,
    Poor quality sound is ALWAYS annoying.


  •  

    Posting Permissions

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