I've got this code:

if(document.getElementById('test1').checked){
    document.getElementById('next1').disabled = false;
}
else{
    document.getElementById('next1').disabled = true;
}
if(document.getElementById('test2').checked){
    document.getElementById('next2').disabled = false;
}
else{
    document.getElementById('next2').disabled = true;
}   

And when I try to add:

if(document.getElementById('test1').checked && document.getElementById('test2').checked){
    document.getElementById('next3').disabled = false;
}
else{
    document.getElementById('next3').disabled = true;

It doesn't work. I guess that's because I already used document.getElementById('test1') and document.getElementById('test2'). My question is why I can't use it again and is there any way to make it work? Also I tried this (didn't work):

$(".lol").change(function(){ 
if ($('.lol:checked').length == $('.lol').length) {
    $("#box").css('background-image', 'url("grey.png")'); //example
} else {
    $("#box").css('background-image', 'url("red.png")'); //example
}
});

I added lol class to test1 and test2 and tried to change background of div with id box. In short: I need to check if two checkboxes are marked and do something if they are or not and they were already checked if they are marked earlier.

I've got this code:

if(document.getElementById('test1').checked){
    document.getElementById('next1').disabled = false;
}
else{
    document.getElementById('next1').disabled = true;
}
if(document.getElementById('test2').checked){
    document.getElementById('next2').disabled = false;
}
else{
    document.getElementById('next2').disabled = true;
}   

And when I try to add:

if(document.getElementById('test1').checked && document.getElementById('test2').checked){
    document.getElementById('next3').disabled = false;
}
else{
    document.getElementById('next3').disabled = true;

It doesn't work. I guess that's because I already used document.getElementById('test1') and document.getElementById('test2'). My question is why I can't use it again and is there any way to make it work? Also I tried this (didn't work):

$(".lol").change(function(){ 
if ($('.lol:checked').length == $('.lol').length) {
    $("#box").css('background-image', 'url("grey.png")'); //example
} else {
    $("#box").css('background-image', 'url("red.png")'); //example
}
});

I added lol class to test1 and test2 and tried to change background of div with id box. In short: I need to check if two checkboxes are marked and do something if they are or not and they were already checked if they are marked earlier.

• javascript
• jquery
• html

• 1 what do you mean by: it doesn't work – Philipp Sander Commented Sep 24, 2013 at 11:59
• 4 Please set up a jsFiddle. It's unclear to me what you are expecting and what happens. – kapa Commented Sep 24, 2013 at 12:00

2 Answers 2

Firstly, a good practice is that if you're going to use an element reference more than once, assign it to a variable.

Here's a simplification of your above code...

/* If you're going to use a single element multiple
 * times, it's best to assign it to a variable, the 
 * getElementById() method has to search the DOM every
 * time.
 */
var test1 = document.getElementById("test1"),
    test2 = document.getElementById("test2"),
    next1 = document.getElementById("next1"),
    next2 = document.getElementById("next2"),
    next3 = document.getElementById("next3");
next1.disabled = !test1.checked;
next2.disabled = !test2.checked;
next3.disabled = !(test1.checked && test2.checked);

Edit: My caffeine deprived brain forgot to address the original question... You can use the getElementById() method as many times as you wish, there's no quota assigned to that method.

There's no such limitation

You can call getElementById multiple times and it will work. Your problem is elsewhere.

Also this code:

if(document.getElementById('test1').checked){
    document.getElementById('next1').disabled = false;
}
else{
    document.getElementById('next1').disabled = true;
}

can be shortened to:

document.getElementById('next1').disabled = !document.getElementById('test1').checked;