Afficher masquer un bouton si une checkbox est cochée dans un tableau html [Résolu]

[arthuro45]

Bonjour,

Je tourne en rond avec cette fonction pourtant simple :

Code :

1
2
3
4
5
6
7
8
function affMasqBtnPrep(){
    var n = $("input:checked[name='prep[]']").length; // Nombre de checkbox cochée
    if(n == 0) {
            $("#BPrep").css({"visibility":"hidden"}); // Bouton invisible
    } else {
            $("#BPrep").css({"visibility":"visible"}); // Bouton visible
        }
};

La case à cocher :

Code :

<input type="checkbox" name="prep[]" value="'.$row['num_commande'].'" class="casePrep">

Le bouton :

Code :

<input type="button" id="BPrep" value="Edition" />

J'aimerais afficher ou masquer un bouton (BPrep) en fonction de l'état des checkbox dans un tableau html. Les checkbox portent toutes le même nom mais des valeurs différentes.

Actuellement le bouton est masqué au chargement de la page, mais quand je coche il ne se passe rien, pas d'erreur non plus.

[Meloooo]

Bonjour,
Tu peux utiliser le .show() ou le .hide() ca te fera moins de code.
et je pense que les [] ne sont pas utiles...

Code :

1
2
3
4
5
6
7
8
9
 
function affMasqBtnPrep(){
    var n = $('input:checked[name=prep]').length; // Nombre de checkbox cochée
    if(n == 0) {
            $("#BPrep").hide();// Bouton invisible
    } else {
            $("#BPrep").show(); // Bouton visible
        }
};

[arthuro45]

Tu peux utiliser le .show() ou le .hide() ca te fera moins de code.
et je pense que les [] ne sont pas utiles...

Le bouton est bien masqué au chargement, mais toujours pas visible quand on coche une case. Pas d'erreur dans la console firefox, là je sèche...

[Meloooo]

A quel moment appelle tu la fonction affMasqBtnPrep() ?

[arthuro45]

A quel moment appelle tu la fonction affMasqBtnPrep() ?

Je l'appel au chargement :

Code :

1
2
3
4
 
$("document").ready(function()  {
  affMasqBtnPrep();
});

[Meloooo]

Normal que ton bouton ne s'affiche pas, car tu appelles ta fonction au démarrage de la page, mais tu ne vérifies pas quand la checkbox est coché,
je pense donc que tu dois jouer sur le .change de ta checkbox
je ne sais pas si je suis très claire.
tu lances ta fonction au chargement de la page + quand l'état de la checkbox change

[arthuro45]

tu lances ta fonction au chargement de la page + quand l'état de la checkbox change

J'ai fais ceci :

Code :

1
2
3
4
5
6
7
 
$("document").ready(function()  {    
      affMasqBtnPrep();
       $("input:checked[name=prep]").change(function(){
           affMasqBtnPrep();
       });
});

Mais ça ne doit pas ce coder ainsi .

[Meloooo]

Essayes d'ajouter un class à tes checkbox :

Code :

1
2
 
<input type="checkbox" class="prep" name="prep[]" value="'.$row['num_commande'].'" class="casePrep">

et tu fais :

Code :

1
2
3
4
5
6
7
 
$("document").ready(function()  {    
      affMasqBtnPrep();
       $(".prep").change(function(){
           affMasqBtnPrep();
       });
});

[arthuro45]

Essayes d'ajouter un class à tes checkbox :

Non désolé ça ne fonctionne pas.

...mais tu ne vérifies pas quand la checkbox est coché

Si j'ai bien compris, cette ligne vérifit si une case est cochée ?

Code :

var n = $('input:checked[name=prep]').length; // Nombre de checkbox cochée

et à chaque changement d'état des cases la fonction doit s'exécuter ?

[Meloooo]

Code :

var n = $('input:checked[name=prep]').length;

Cette ligne vérifie le nombre de checkbox coché portant le name prep.
et oui ta fonction doit s’exécuter au démarrage de la page + quand une checkbox est coché ou décoché
Je viens d'essayer de mon côté avec le code suivant :

Code :

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
 
		<script type="text/javascript" src="jquery.js"></script>
<script>
  function affMasqBtnPrep(){
 
     var n = $("input:checked[name='prep[]']").length;// Nombre de checkbox cochée
    if(n == 0) {
            $("#BPrep").hide();// Bouton invisible
    } else {
            $("#BPrep").show(); // Bouton visible
        }
 
}
$(document).ready(function() {
  affMasqBtnPrep();
	$(".test").change(function () {
  affMasqBtnPrep();
	});
});
 
 
</script>
 
<input type="checkbox" name="prep[]" class="test" value="" class="casePrep">
 
<input type="button" id="BPrep" value="Edition" />

Et ca fonctionne correctement.
Le bouton s'affiche lorsque la checkbox est cochée, et disparait lorsqu'elle n'est pas cochée...

[arthuro45]

Ca fonctionne.
L'erreur venait de la syntaxe sur le name

Bon

Code :

var n = $("input:checked[name='prep[]']").length;// Nombre de checkbox cochée

Mauvais

Code :

var n = $('input:checked[name=prep]').length;

Merci pour ta persévérance