...

View Full Version : disable/undisable checkboxes



technotool
06-11-2008, 05:45 AM
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.



<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.

rangana
06-11-2008, 05:57 AM
You can add an else statement:


<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:


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.

PremiumBlend
06-11-2008, 06:03 AM
If you want (and I highly recommend using it) use jQuery (http://jquery.com) and you can do this in one line of code. Check out this example: http://blog.commonthread.com/2007/6/16/select-all-none-with-jquery

technotool
06-11-2008, 06:16 AM
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

technotool
06-11-2008, 06:18 AM
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

rangana
06-11-2008, 06:20 AM
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.

technotool
06-11-2008, 06:22 AM
yes that works fine.

but why won't it work with the statement?

thanks
:confused:

rangana
06-11-2008, 06:26 AM
else cannot have a condition.

For further reading:
http://www.w3schools.com/JS/js_if_else.asp

technotool
06-11-2008, 06:46 AM
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.




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;
}

}

rangana
06-11-2008, 06:49 AM
Show us your complete modification instead.

technotool
06-11-2008, 12:32 PM
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.


<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>

Kor
06-11-2008, 12:52 PM
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.


<!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.

technotool
06-11-2008, 08:46 PM
thanks very much that is really elegant and makes good sense.

Technotool.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum