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.** · 11/04/2020, 22h56

Salut,

Merci.
J'ai test� mais cela n'a pas l'air de fonctionner chez moi...

**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

Disabled tous les radio buttons Enabled juste un radio button part01

JavaScript

Discussions similaires

Partager

Partager