Disabled tous les radio buttons Enabled juste un radio button part01

**Shadow750** · 11/04/2020, 19h13

Bonjour, Bonsoir, Messieurs, Mesdames,

Le titre du sujet : Activer l'attribut "disabled" à tous les radios buttons SAUF au radio button ayant l'attribut "checked" SANS le bouton d'envoi

Je poste juste un code que j'ai résolu moi-même qui pourrait être utile aux développeurs débutants comme moi.

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
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="RadioButtonsValidation.css">
    <title>Radio Button Validation in JavaScript Perso</title>
</head>
 
<body>
    <h1>Radio Button Validation in JavaScript Perso</h1>
 
    <form name="form">
        <label>
            <input type="radio" name="container" value="like">
            <span class="rounded"></span>
            LIKE</label>
        <br>
 
        <label>
            <input type="radio" name="container" value="dislike">
            <span class="rounded"></span>
            DISLIKE</label>
        <br>
 
        <label>
            <input type="radio" name="container" value="share">
            <span class="rounded"></span>
            SHARE</label>
        <br>
 
        <label><input type="radio" name="container" value="subscribe">
            <span class="rounded"></span>
            SUBSCRIBE</label>
        <br><br>
        <div>
            <p id="message"></p>
        </div>
        <br>
    </form>
 
</body>
 
</html>

Code CSS :

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
34
35
label input[type="radio"] {
    display: none;
}
label .rounded {
    background-color: #fff;
    border: 3px solid #bdc3c7;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 15px;
    position: relative;
}
input[type="radio"]:disabled + .rounded {
    background-color: #aaa;
}
input[type="radio"]:disabled + .rounded::after {
    background-color: #333;
}
 
input[type="radio"]:checked + .rounded {
    color: green;
}
input[type="radio"]:checked + .rounded::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
}

Code JavaScript :

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
var radioButtons = document.form.container;
 
        for (var i = 0; i < radioButtons.length; i++) {
            // Click on / off 
            radioButtons[i].addEventListener('click', function(event) {
                // le input clicker est not checked
                this.checked = false;
                document.getElementById('message').style.color = 'red';
                document.getElementById('message').innerHTML = '** Please select anyone';
                // Pour le restant des input radio not checked,
                // ces inputs sont not disabled !!
                for (var i = 0; i < radioButtons.length; i++) {
                    radioButtons[i].removeAttribute('disabled', 'false');
                }
            });
            radioButtons[i].addEventListener('change', function(event) {
                // le input clicker est checked
                this.checked = true;
                document.getElementById('message').style.color = 'green';
                document.getElementById('message').innerHTML = this.value;
                // Pour le restant des input radio not checked,
                // ces inputs sont disabled !!
                for (var i = 0; i < radioButtons.length; i++) {
                    radioButtons[i].setAttribute('disabled', 'true');
                }
                this.removeAttribute('disabled', 'false');
            });
        }

Voila, Voila, j'espère que ce code pourra vous servir

**Shadow750** · 11/04/2020, 19h58

Bonjour, Bonsoir, Messieurs, Mesdames,

Le titre du sujet : Désactiver TOUS les radio buttons ayant l'attribut "disabled" SAUF un radio button ayant l'attribut "checked" AVEC bouton d'envoi.

Je poste un code que j'ai résolu moi-meme qui j'espère pourrait servir à des développeurs débutants comme moi

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
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="RadioButtonsValidation.css">
    <title>Radio Button Validation in JavaScript in Hindi 2017 Perso02</title>
</head>
 
<body>
    <h1>Radio Button Validation in JavaScript in Hindi 2017 Perso02</h1>
 
    <form name="form" onsubmit="return myFun()">
        <label>
            <input type="radio" name="container" value="like">
            <span class="rounded"></span>
            LIKE</label>
        <br>
 
        <label>
            <input type="radio" name="container" value="dislike">
            <span class="rounded"></span>
            DISLIKE</label>
        <br>
 
        <label>
            <input type="radio" name="container" value="share">
            <span class="rounded"></span>
            SHARE</label>
        <br>
 
        <label><input type="radio" name="container" value="subscribe">
            <span class="rounded"></span>
            SUBSCRIBE</label>
        <br><br>
        <div>
            <p id="message"></p>
        </div>
        <br>
        <input type="submit" value="submit">
    </form>
 
    <script src="RadioButtonValidationPerso02.js"></script>
</body>
 
</html>

Code CSS :

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
34
35
label input[type="radio"] {
    display: none;
}
label .rounded {
    background-color: #fff;
    border: 3px solid #bdc3c7;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 15px;
    position: relative;
}
input[type="radio"]:disabled + .rounded {
    background-color: #aaa;
}
input[type="radio"]:disabled + .rounded::after {
    background-color: #333;
}
 
input[type="radio"]:checked + .rounded {
    color: green;
}
input[type="radio"]:checked + .rounded::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
}

Code JavaScript :

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
34
35
36
37
38
39
40
41
42
43
44
function myFun() {
    var radioButtons = document.form.container;
    console.log('var radioButtons = document.form.container;');
    console.log(radioButtons);
 
    // PARTIE 0 : Après avoir cliquer sur "submit"
    for (var i = 0; i < radioButtons.length; i++) {
        // Click on / off 
        radioButtons[i].addEventListener('click', function (event) {
            // le input clicker est not checked
            this.checked = false;
            document.getElementById('message').innerHTML = '';
            // Pour le restant des input radio not checked,
            // ces inputs sont not disabled !!
            for (var i = 0; i < radioButtons.length; i++) {
                radioButtons[i].removeAttribute('disabled', 'false');
            }
            return false;
        });
        radioButtons[i].addEventListener('change', function (event) {
            // le input clicker est checked
            this.checked = true;
            // Pour le restant des input radio not checked,
            // ces inputs sont disabled !!
            for (var i = 0; i < radioButtons.length; i++) {
                radioButtons[i].setAttribute('disabled', 'true');
            }
            this.removeAttribute('disabled', 'false');
            return false;
        });
    } // FIN DE la boucle for ayant Events Click ET change
 
    // PARTIE 02 : Après avoir cliquer sur "submit"
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            document.getElementById('message').style.color = 'green';
            document.getElementById('message').innerHTML = radioButtons.value;
            return false;
        }
    } // Boucle for verifiant SI input radio est checked ou not
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = '** Please select anyone';
    return false;
}

Bon, le principe de ce code :
Lorsque vous cliquez sur un bouton radio, celui apparaît VERT tandis que les autres boutons radio deviennent GRIS puis vous cliquez sur "submit"
cela affichera la valeur du bouton radio checked.

SI, avant de cliquer sur "submit", vous voulez changer d'avis (= de bouton radio), il suffit juste de cliquer, A NOUVEAU, sur le bouton radio VERT.
ALORS le bouton radio VERT redevient vide / blanc et les autres boutons radio qui étaient GRIS (= disabled) redeviennent, eux aussi, vides / blancs.

Aussi, après avoir cliqué sur "submit", vous pouvez cliquer sur un autre bouton radio en faisant le même procédé écrit juste en haut
(SI, avant de cliquer sur ... ... redeviennent, eux aussi, vides / blancs)

Mais j'ai un petit problème :
Lorsque vous cliquez pour la première fois sur le bouton radio OU que vous rafraîchissez le navigateur, les autres boutons radios ne deviennent pas GRIS

et je précise que, dans ce code la, il y a le bouton d'envoi "submit"

Alors que dans mon 1er exemple : https://www.developpez.net/forums/d2.../#post11474413
tout marche et je précise que dans ce lien la, il n'y a pas de bouton d'envoi "submit"

Donc, quelqu'un pourrait m'aider sur ce petit souci, merci

**Beginner.** · 12/04/2020, 00h10

Salut,

Ben chez moi les bouton ne deviennent pas "gris"... Dans l'autre code en changeant quelques point ils devenaient gris...

Mais sinon je trouve que c'est un peu lourd pour l'utilisateur de devoir re-cliquer sur le bouton "vert" pour pouvoir en sélectionner un autre... Es-tu sûr de vouloir faire ça ?

En plus ton code est mal structuré : le code qui concerne les gestionnaires d'évènement ne devrait pas être à l'intérieur de la fonction myFunc --> cette fonction n'est exécutée que lorsqu'on clique sur submit donc avant ce clique le code qui concerne les gestionnaires d'évènement n'est pas exécuté.

Tu peux améliorer les choses comme ça :

Code javascript :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var radioButtons = document.form.container;
console.log('var radioButtons = document.form.container;');
console.log(radioButtons);
 
 
// PARTIE 0 : Après avoir cliquer sur "submit"
for (var i = 0; i < radioButtons.length; i++) {
    // Click on / off 
    radioButtons[i].addEventListener('click', function (event) {
        // le input clicker est not checked
        //this.checked = false;
        document.getElementById('message').innerHTML = '';
        // Pour le restant des input radio not checked,
        // ces inputs sont not disabled !!
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].removeAttribute('disabled', 'false');
        }
        //return false;
    });
    radioButtons[i].addEventListener('change', function (event) {
        // le input clicker est checked
        //this.checked = true;
 
        // Pour le restant des input radio not checked,
        // ces inputs sont disabled !!
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].setAttribute('disabled', 'true');
        }
        this.removeAttribute('disabled', 'false');
        //return false;
    });
} // FIN DE la boucle for ayant Events Click ET change
 
 
function myFun() {
 
    // PARTIE 02 : Après avoir cliquer sur "submit"
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            document.getElementById('message').style.color = 'green';
            document.getElementById('message').innerHTML = radioButtons.value;
            return false;
        }
    } // Boucle for verifiant SI input radio est checked ou not
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = '** Please select anyone';
    return false;
}

J'ai aussi mis en commentaire certaines lignes qui posaient problèmes ou qui n'étaient pas utiles...

Invité · 12/04/2020, 11h45

Bonjour,

c'est à la fois lourd et inutile.

1- lourd, car :

trop de code pour si peu
pas du tout ergonomique (on doit cliquer X fois, bouton "submit",...)

2- inutile, car :

par défaut, pour les <input type="radio">, on ne peut choisir/cocher qu'UNE SEULE case * !
* contrairement aux <input type="checkbox">, pour lesquelles on peut cocher plusieurs cases

Donc : "désactiver" les autres cases n'a absolument aucun intérêt.

Sur un bouton "radio", il n'y a pas de "Click on / off" (contrairement à un "checkbox", où on coche/décoche)
Sur un bouton "radio", qu'on clic X fois, le choix RESTE coché.
Sur un bouton "radio", dès QU'UNE case est cochée, on ne peut plus décocher TOUTES les cases (on a donc forcément UN CHOIX)

La solution la plus simple est souvent la meilleure... :

Code JavaScript :

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
"use strict";
const radioButtons = document.form.container;
const message = document.getElementById('message');
 
for (let i=0, lng=radioButtons.length; i<lng; i++)
{
  // Click radio
  radioButtons[i].addEventListener('click', function (event) {
    // 0- affichage d'un message  (facultatif !)
    message.style.color = 'green';
    message.innerHTML = 'Votre choix : '+radioButtons[i].value;
    // ICI, on peut :
    // 1- soit envoyer le formulaire (de façon "classique")
    // document.form.submit();
    // 2- soit envoyer/enregistrer le choix via AJAX (sans rechargement de page)
    // (....)
  });
}

N.B. On peut :

supprimer purement et simplement le bouton "Submit"
OU (si vraiment tu veux en passer par là), ne l'AFFICHER QUE quand une case est cochée *

* d'où un 3ème cas :

Code JavaScript :

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

1
2
3
 
    // 3- soit afficher le bouton "submit"
    document.getElementById('btnsubmit').style.display = 'block';

Avec, bien sûr :

Code html :

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

        <input type="submit" value="submit" id="btnsubmit" />

Code css :

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

#btnsubmit { display:none; }

**Shadow750** · 18/04/2020, 20h10

Tout d'abord, merci de vos critiques à beginner ET jreaux62 .

Aussi, j'ai resolu mon petit probleme lors du premier click sur les radios avec l'apparition du gris

donc, voici le code Javascript

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function myFun() {
    var radioButtons = document.form.container;
    console.log('var radioButtons = document.form.container;');
    console.log(radioButtons);
 
    // Après avoir cliquer sur "submit
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            document.getElementById('message').style.color = 'green';
            document.getElementById('message').innerHTML = radioButtons.value;
            return false;
        }
    } // Boucle for verifiant SI input radio est checked ou not
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = '** Please select anyone';
    return false;
}
 
var radioButtons = document.form.container;
for (var i = 0; i < radioButtons.length; i++) {
    // Click on / off 
    radioButtons[i].addEventListener('click', function (event) {
        // le input clicker est not checked
        this.checked = false;
        document.getElementById('message').innerHTML = '';
        // Pour le restant des input radio not checked,
        // ces inputs sont not disabled !!
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].removeAttribute('disabled', 'true');
        }
    });
    radioButtons[i].addEventListener('change', function (event) {
        // le input clicker est checked
        this.checked = true;
        // Pour le restant des input radio not checked,
        // ces inputs sont disabled !!
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].setAttribute('disabled', 'true');
        }
        this.removeAttribute('disabled', 'false');
    });
} // FIN DE la boucle for ayant Events Click ET change

Le code html et Css restent les mêmes.

Ce code avec les radio buttons désactivés et activés est juste pour m'améliorer en developpement web CAR suis débutant.

ps : Ce code ne sera pas en mode public, soit c'est un truc perso

Bien sur, j'ai aussi pris en compte vos critiques

Merci de vos critiques et de vos aides