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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    disable/undisable checkboxes

    Hi,
    I am having some problems with my allOrNone() function. I have e checkbox(id=rosNone) which will disable other checkboxes inside the id="ros" div. seems to work ok. I can't figure out how to undisable the checkboxes if you uncheck the "None of the following" checkbox.

    Code:
    <html>
    <head>
    <script>
    function allOrNone(){
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
        if (rosIsNone.checked==true){
           for (var i=0; i<rosItems.length; i++) {
           rosItems[i].disabled = true
           }
        } 
    } 
    
    </script>
    
    </head>
    <body>
    <B>Review of Systems:</B>
    <input type="checkbox" name="none" Value="none" id="rosNone" onClick="allOrNone();">None of the Following<br>
    <div id="ros">
    <B>CONSTITUTIONAL:</B><br>
    <input type="checkbox" name="" Value="" id="ros">Weight gain
    <input type="checkbox" name="" Value="" id="ros">Weight Loss
    <input type="checkbox" name="" Value="" id="ros">Fever
    <input type="checkbox" name="" Value="" id="ros">Weakness
    <input type="checkbox" name="" Value="" id="ros">Malaise
    <input type="checkbox" name="" Value="" id="ros">Insomnia
    <input type="checkbox" name="" Value="" id="ros">Fatigue
    <input type="checkbox" name="" Value="" id="ros">chills
    <input type="checkbox" name="" Value="" id="ros">Night Sweats<br>
    Thanks in advance.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You can add an else statement:
    Code:
    <script>
    function allOrNone(){
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
        if (rosIsNone.checked==true)
    	{
           for (var i=0; i<rosItems.length; i++)
    	   {
           rosItems[i].disabled = true;
           }
        }
    	else
    	{
    	for (var i=0; i<rosItems.length; i++)
    	   {
           rosItems[i].disabled = false;
           }
    	}
    
    	
    } 
    </script>
    ...or could be modified, in a less verbose way into:
    Code:
    function allOrNone(){
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
           for (var i=0; i<rosItems.length; i++)
    	   {
           rosItems[i].disabled =(rosIsNone.checked==true)? true:false;
           }
    }
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    If you want (and I highly recommend using it) use jQuery and you can do this in one line of code. Check out this example: http://blog.commonthread.com/2007/6/...ne-with-jquery
    My Website: DumpsterDoggy

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
      else (rosIsNone.checked == false)    {
        for (var i=0; i<rosItems.length; i++)
           {
           rosItems[i].disabled = false;
           }
        }
    I was trying this code above and it wasn't working. any ideas why. thnks

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am going to have to look into JQuery. everyone is talking about it. I am still trying to figure out how to stay afloat in the javascript ocean. thanks for the insight. technotool

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by technotool View Post
    Code:
      else (rosIsNone.checked == false)    {
        for (var i=0; i<rosItems.length; i++)
           {
           rosItems[i].disabled = false;
           }
        }
    I was trying this code above and it wasn't working. any ideas why. thnks
    What happens when you remove the highlighted.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    yes that works fine.

    but why won't it work with the statement?

    thanks

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    else cannot have a condition.

    For further reading:
    http://www.w3schools.com/JS/js_if_else.asp
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    technotool (06-11-2008)

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok. thanks.

    on the flip side. I wanted to disable the "none" button if a user checked one of the checkbox items in the div id="ros" section. I created this turnOffNone function but I think there is a conflict because neither function (allOrNone() or turnOffNone() ) is now working. is there a better way to handle this.

    Code:
    function turnOffNone() {
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
        for (var i=0; i<rosItems.length; i++){
            if (rosItems[i].checked == true){
            rosIsNone.disabled = true;
            }  
        }
        else {
            rosIsNone.disabled = false;
        }
        
    }

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Show us your complete modification instead.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #11
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here is the code. the two functions seem to be conflicting. If I comment out the turnOffNone(), allOrNone() works. if I comment out allOrNone(), turnOffNone() works. Is there a better way to do this without JQuery. Thanks for sticking with me. What I am trying to achieve is a "either or" situation. either "None" or the "checkboxes in the <div id="ros">, but not both can be checked.

    Code:
    <html>
    <head>
    <script>
    function allOrNone(){
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
        if (rosIsNone.checked==true){
           for (var i=0; i<rosItems.length; i++) {
           rosItems[i].disabled = true
           }
        }
        else
        {
        for (var i=0; i<rosItems.length; i++)
           {
           rosItems[i].disabled = false;
           }
        }
     
    } 
    
    function turnOffNone() {
        var rosIsNone = document.getElementById('rosNone')
        var rosItems = document.getElementById('ros').getElementsByTagName('input')
        for (var i=0; i<rosItems.length; i++){
            if (rosItems[i].checked == true){
            rosIsNone.disabled = true;
            }  
        }
        else {
            rosIsNone.disabled = false;
        }
        
    }
    
    
    </script>
    
    </head>
    <body>
    <B>Review of Systems:</B>
    <input type="checkbox" name="none" Value="none" id="rosNone" onClick="allOrNone();">None of the Following<br>
    <div id="ros">
    <B>CONSTITUTIONAL:</B><br>
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Weight gain
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Weight Loss
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Fever
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Weakness
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Malaise
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Insomnia
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Fatigue
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">chills
    <input type="checkbox" name="" Value="" id="ros" onClick="turnOffNone();">Night Sweats<br>
    </div>

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Gee what an intricate code for a simple matter. And a huge error when using the same id for different elements. id must be unique on document/session. Moreover, there's a lack of logic to wait that an event might do anything upon an disabled element. If disabled, the element is "dead", you can't "touch" him, you can't click on it, roll over it and so on. The user will easily understand that he should uncheck the "None of the Following" if he changes his mind and wants to use the bellow checkboxes.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    function allOrNone(obj,id){
    var check=document.getElementById(id).getElementsByTagName('input'),i=0,c;
    while(c=check[i++]){
    c.disabled=obj.checked;
    obj.checked?c.checked=false:null;
    }
    }
    </script>
    </head>
    <body>
    <B>Review of Systems:</B>
    <input type="checkbox" name="none" value="none" id="rosNone" onclick="allOrNone(this,'ros');">None of the Following<br>
    <div id="ros">
    <B>CONSTITUTIONAL:</B><br>
    <input type="checkbox" name="" value="">Weight gain
    <input type="checkbox" name="" value="">Weight Loss
    <input type="checkbox" name="" value="">Fever
    <input type="checkbox" name="" value="">Weakness
    <input type="checkbox" name="" value="">Malaise
    <input type="checkbox" name="" value="">Insomnia
    <input type="checkbox" name="" value="">Fatigue
    <input type="checkbox" name="" value="">chills
    <input type="checkbox" name="" value="">Night Sweats<br>
    </div>
    </body>
    </html>
    ==
    Make sure you have a single div with the id="ros". Give your other divs other ids, and simply pass those as the second parameter to the function.

    And forget about JQuery. 99&#37; of cases you don't need JQuery or whichever frameworks/libraries as long as you can solve the problems with several simple javascript code lines.
    Last edited by Kor; 06-11-2008 at 08:31 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    technotool (06-11-2008)

  • #13
    New to the CF scene
    Join Date
    May 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks very much that is really elegant and makes good sense.

    Technotool.


  •  

    Posting Permissions

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