JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" id="radio-form">
<input type="radio" id="1" name="actionlevel" value="1">
<label for="1">Sans intérêt</label><br>
<input type="radio" id="2" name="actionlevel" value="2">
<label for="2">Contacté</label><br>
<input type="radio" id="3" name="actionlevel" value="3" checked>
<label for="3">Documenté</label><br>
<input type="radio" id="4" name="actionlevel" value="4">
<label for="4">Consultation en cours</label><br>
<input type="radio" id="5" name="actionlevel" value="5">
<label for="5">Offre réalisée</label><br>
<!-- Ce groupe ne sera activé que si #5 est coché -->
<p id="radio-group">
<input type="radio" id="6" name="actionlevel2" value="6">
<label for="6">Attente réponse client</label><br>
<input type="radio" id="7" name="actionlevel2" value="7">
<label for="7">Décliné par nous</label><br>
<input type="radio" id="8" name="actionlevel2" value="8" checked>
<label for="8">Affaire perdue</label><br>
</p>
<input type="radio" id="9" name="actionlevel" value="9">
<label for="9">Commande en cours</label><br>
<input type="radio" id="10" name="actionlevel" value="10">
<label for="10">Commande soldée</label><br>
</form>
CSS
#radio-group {
padding: 0em 1em;
margin: 0.5em 0;
}
label,
input {
cursor: pointer;
}
JavaScript
const form = document.getElementById("radio-form")
const group = document.getElementById("radio-group")
const radio5 = document.getElementById("5")
// S'occupera d'activer/désctiver un groupe d'input[type="radio"]
// Il suffit de passer la balise parente au groupe d'input en second paramètre
const toggleRadioGroup = (enable, groupContainer) => {
const radios = groupContainer.querySelectorAll('input[type="radio"]')
for (const radio of radios) {
// Décocheras la case en cas de désactivation
if (!enable) radio.checked = false
// Active/désactive l'interactivité de l'input
radio.disabled = !enable
}
}
// On ajoute un évenement et affiche/masque le groupe
form.onchange = () => toggleRadioGroup(radio5.checked, group)
toggleRadioGroup(false, group)