Discussion :

[dubitoph]

Bonjour,

Dans un formulaire d'insertion de photos, je donne la possibilité d'ajouter dynamiquement de nouvelles photos. Chaque photo est liée à un input de type checkbox pour indiquer si la photo est ou non la photo principale. Comme il ne peut y avoir qu'une seule photo principale, je désire décocher les cases à cocher autres que celle qu'on vient de cocher.

J'ai donc le Jquery suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
//Unchecking mainPhoto when a checkbox is checked to have only one main photo
//$('input[type="checkbox"]').change(function(event)  
$('body').on( 'change', 'input[type="checkbox"]',function() 
{
 
    if ($(this).is(':checked')) 
    {
 
        $('input[type="checkbox"]').removeAttr('checked');
 
    } 
 
});

Cela fonctionne bien si les photos pré-existaient (si les inputs ont été chargés lors du chargement de la page), mais ça ne fonctionne pas si la photo a été créée dynamiquement (après le chargement de la page). Ni la solution commentée dans le code précédent ni celle non commentée ne fonctionnent.

Quelqu'un aurait une idée sur la manière de procéder?

Merci d'avance pour votre aide.

[Invité]

Bonjour,

1- il manque :

Code :

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

1
2
3
$(function(){ // équivalent à : $(document).ready(function() {
...
});

2- Un seul choix -> <input type="radio" ... />.

[dubitoph]

Bonjour et merci pour ton aide..

J'ai fait ceci :

Code :

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
 
$(function(){ // équivalent à : $(document).ready(function() {
    //Unchecking mainPhoto when a checkbox is checked to have only one main photo
    //$('input[type="checkbox"]').change(function(event)  
    $('body').on( 'change', 'input[type="checkbox"]',function() 
    {
 
        if ($(this).is(':checked')) 
        {
 
            $('input[type="checkbox"]').removeAttr('checked');
 
        } 
 
    });
});

Malheureusement, ça ne change rien.

Cependant, je n'ai pas compris ce que tu voulais dire au point 2 :

2- Un seul choix -> <input type="radio" ... />.

[SpaceFrog]

Tu peux avoir plusieurs checkbox cochées en même temps.
Par contre si tu utilises des bouton radios de même name, tu ne pourras en avoir qu'un seul coché à la fois.

Code html :

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

1
2
3
4
5
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" name="foo" value="3" />
<input type="radio" name="foo" value="4" />
<input type="radio" name="foo" value="5" />

Sinon avec des checkboxes créés dynamiquement: https://jsfiddle.net/ba1ox50s/1/

[dubitoph]

Merci beaucoup à vous deux. Voici comment, avec votre aide, j'ai pu résoudre mon problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$('body').on('click','input[type="checkbox"]',function()
{
 
    if ($(this).is(':checked')) 
    {
 
        $('input[type="checkbox"]').not($(this)).prop('checked',false);
 
    }
 
});