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