Javascript : help sur bascule checkbox ou radio

Résolu/Fermé
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 - 26 févr. 2015 à 15:58
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 - 27 févr. 2015 à 20:21
Bonjour,
je suis absolument ignare en JS. Le niveau 0 m'est encore inaccessible mais je me lance.
Je crée en PHP une table alimentée par un listing :
Tout marche nickel chrome

$exec=mysql_query($req,$cnx);
$i=1;
while ($val=mysql_fetch_row($exec))
{
$nom=$val[2];
echo "<tr><td><input type='text' size='6' readonly name=nom$i value=$val[2]></td>
<td><input type='checkbox' name='v$i' id='boxv$i''></td>
<td><input type='checkbox' name='s$i' id='boxs$i'></td>
<td><input type='checkbox' name='d$i' id='boxd$i'></td>
<td><input type='checkbox' name='4j$i' id='boxe$i'></td>
<td><input type='checkbox' name='1a$i' id='boxa$i'></td></tr>";
$i++;
}
J'ai besoin d'interdire les checkbox boxe$i et boxa$i si boxv$i ou boxs$i ou boxd$i sont cochées, de faire la réciproque si boxe$i ou boxa$i sont cochées. Et de libérer tout si tout est décoché!
Explication : évènement sur 3 jours Vendredi Samedi Dimanche : on peut sélectionner 1 ou 2 jours.
Pour la durée de l'évènement : (id boxe$i checked) on interdit V S D et Annuel
Sur annuel checked, on interdit V S D et évènement.
Je sais que ça doit se passer côté browser donc le PHP est inutile.
Pouvez vous me donner la syntaxe exacte (côté script et côté appel du script) car mon site doit être opérationnel le plus vite possible et je suis en plein brouillard...Je sais, j'abuse.
Cordialement

1 réponse

Xavierdu34 Messages postés 216 Date d'inscription lundi 2 décembre 2013 Statut Membre Dernière intervention 10 octobre 2016 21
Modifié par Xavierdu34 le 27/02/2015 à 11:17
Bon ma réponse ne va pas être du tout optimisée mais surement plus facile à comprendre ainsi et elle est fonctionnelle.

il te faut un script JS comme suivant :
<script>
function coche(i) {
var boxv = document.getElementById('boxv'+i);
var boxs = document.getElementById('boxs'+i);
var boxd = document.getElementById('boxd'+i);
var boxe = document.getElementById('boxe'+i);
var boxa = document.getElementById('boxa'+i);

if(boxv.checked === true || boxs.checked === true || boxd.checked === true) {
boxa.checked = false; boxa.disabled = true; 
boxe.checked = false; boxe.disabled = true; 
}

if(boxe.checked === true || boxa.checked === true) {
boxv.checked = false; boxv.disabled = true;
boxs.checked = false; boxs.disabled = true;
boxd.checked = false; boxd.disabled = true;
}

if(boxv.checked === false && boxs.checked === false && boxd.checked === false) {
boxa.disabled = false; 
boxe.disabled = false; 
}

if(boxv.checked === false && boxs.checked === false && boxd.checked === false && boxa.checked === false && boxe.checked === false) {
boxv.disabled = false;
boxs.disabled = false;
boxd.disabled = false;
boxe.disabled = false;
boxa.disabled = false;
}

}
</script>


et tu dois remplacer ta ligne php :
echo "<tr><td><input type='text' size='6' readonly name=nom$i value=$val[2]></td>

par
echo "<tr onclick='coche($i);'><td><input type='text' size='6' readonly name=nom$i value=$val[2]></td>
0
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 1
27 févr. 2015 à 18:01
Je te remercie vraiment pour la qualité de ta réponse et son côté complet. Je vais créer ta syntaxe et te tenir informé du succès prévisible.
Cordialement
0
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 1
27 févr. 2015 à 19:30
Ben ça marche pas : voici le résultat:
si je mets<tr onclick='coche($i);'><td><input type='text' size='6' readonly name=nom$i value=$val[2]></td> il ne se passe rien.
Par contre, si je mets onclick='coche($i) dans mes td input type='checkbox' ça marchouille. Je clique sur le 1er checkbox (boxV) ça verrouille la ligne (A et E). Si je reclique pour annuler ça ne libère pas les choix A & E. Si je clique sur le 2 input il ne se passe rien. Je pense en lisant ton code que tu as laissé un côté incomplet pour que je gamberge un peu ce dont je te remercie. J'ai pu deviner ce qu'il me faut faire. Je revois le code et te tiens informé si je n'y arrive pas mais j'ai saisi la philosophie du truc. Merci encore et @+ sans doute. Si j'y arrive (réciprocité) je mettrai le code complet.... Cordialement
0
clé de 12 Messages postés 131 Date d'inscription samedi 19 juin 2010 Statut Membre Dernière intervention 16 janvier 2024 1
Modifié par clé de 12 le 27/02/2015 à 20:24
Voila; c'est fait! Ta base était super bonne! J'ai séparé boxa et boxe, enlevé quelques box.disable pour permettre la bascule, et mis l'appel à la fonction dans mes input! Je te remercie pour ton aide précieuse.
Mon code ?

if(boxv.checked === true || boxs.checked === true || boxd.checked === true) {
boxa.checked = false;
boxe.checked = false;
}

if(boxe.checked === true ) {
boxv.checked = false;
boxs.checked = false;
boxd.checked = false;
boxa.checked = false;
}
if( boxa.checked === true) {
boxv.checked = false;
boxs.checked = false;
boxd.checked = false;
boxe.checked = false;
}
if(boxv.checked === false && boxs.checked === false && boxd.checked === false) {
boxa.disabled = false;
boxe.disabled = false;
}

if(boxv.checked === false && boxs.checked === false && boxd.checked === false && boxa.checked === false && boxe.checked === false) {
boxv.disabled = false;
boxs.disabled = false;
boxd.disabled = false;
boxe.disabled = false;
boxa.disabled = false;
}

}
</script>
J'ai reçu ta modif entre temps, super sympa.
Cordialement
0