Discussion :

[DarkCator]

Bonjour,

je code une petite interface graphique en html/javascript.

J'ai crée une espèce de liste de checkbox et un bouton. J'aimerai que quand une des checkbox est cochée, le bouton se dégrise et devienne clickable. J'ai pu faire ça, mais par contre cela ne marche qu'avec la premiere checkbox et pas avec les autres... Quand je coche la deuxieme checkbox le bouton reste grisé...

Je vous joins mon code pour mieux cerner le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function checkbox1(){
    if(document.getElementById('checkbox').checked){
        document.getElementById('submit').disabled = '';
    }
    else{
        document.getElementById('submit').disabled = 'disabled';
    }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<tr>
<th width="30px"></th>
<th>Transponder's name</th>
<th>Min band (MHz)</th>
<th></th>
<th>Max band (MHz)</th>
<tr/>
<tr class="ligne">
<td class="first" width="30px" align="center"><input type="checkbox" name="Transponder" value="" id="checkbox" onclick="checkbox1();"></td>
<td align="center">TR1</td>
<td align="center">13 000</td>
<td align="center">-</td>
<td class="last" align="center" class="last">14 000</td>
</tr>
 <tr class="ligne">
<td class="first" width="30px" align="center"><input type="checkbox" name="Transponder" value="" id="checkbox" onclick="checkbox1();"></td>
<td align="center">TR2</td>
<td align="center">13 000</td>
<td align="center">-</td>
<td class="last" align="center" class="last">14 000</td>
</tr>
<tr class="ligne">
<td class="first" width="30px" align="center"><input type="checkbox" name="Transponder" value="" id="checkbox" onclick="checkbox1();"></td>
<td align="center">TR3</td>
<td align="center">13 000</td>
<td align="center">-</td>
<td class="last" align="center">14 000</td>
</tr>
<section id="BoutonAddAuthBand">
<form action="AddAuthorizedBand.php" method="post">
<input type="submit" name="envoyer" value="Add auth band" id="submit" disabled="disabled" />
</form>
</section>

Pourriez-vous m'aider à résoudre ce problème?

Merci !

[Invité]

Bonjour,
un id doit être unique.

=> Comment récupérer l'état de cases à cocher ?

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function checkbox1(){
	var ok = false;
	for (i=0; i<document.monForm.Transponder.length; i++) {
		if (document.monForm.Transponder[i].checked){
			ok = true;
		} 
	}
	if(ok){
		document.getElementById('submit').disabled = '';
	}
	else{
		document.getElementById('submit').disabled = 'disabled';
	}
}

Avec :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form name="monForm" ................>

+ supprimer les id="checkbox"
ou les remplacer : id="checkbox1", id="checkbox2"...

[DarkCator]

Merci ça fonctionne très bien ! Le mieux était aussi de supprimer les id checkbox

Et comment pourrais-je faire pour rendre impossible le fait de cocher deux checkboxs en même temps?

[SpaceFrog]

utilise des radios de même name ... c'est fait pour ça !!!