I have a form with several checkboxes and, below each of those checkboxes, a set of radio buttons. I want to disable and reset radio buttons when the corresponding checkbox is not checked or unchecked.
I tried to enable the radio buttons using the jquery selector :radio[name=vid]
but it doesn't work.
<form action='matrix.php' method='post' id='formanal' name='formanal'>
<ul class="desc">
<li><label><input type="checkbox" id ="1" value="Couleur des tarses" name="1">Couleur des tarses</label></li>
<ul>
<li class="valeur"><label><input type="radio" value="1-1" id="1-1" name="v1" disabled>Jaunes</label></li>
<li class="valeur"><label><input type="radio" value="1-2" id="1-2" name="v1" disabled>Blancs</label></li>
</ul>
</ul>
...
<ul class="desc">
<li><label><input type="checkbox" id ="8" value="Forme des ailes" name="8">Forme des ailes</label></li>
<ul>
<li class="valeur"><label><input type="radio" value="8-15" id="8-15" name="v8" disabled>Pliées en long</label></li>
<li class="valeur"><label><input type="radio" value="8-16" id="8-16" name="v8" disabled>Étalées en toit</label></li>
</ul>
</ul>
<input type='submit' name='action' value='Valider'></div>
</form>
$(document).ready(function() {
$("form input:checkbox").change(function() {
var vid = 'v' + this.id;
var etat = $(this).prop('checked');
if (etat) {
$(':radio[name=vid]').prop('disabled', false);
} else {
$(':radio[name=vid]').prop('checked', false);
$(':radio[name=vid]').prop('disabled', true);
}
});
});
The radio buttons are disabled when created, but a click on the corresponding checkbox doesn't enable them. Thanks in advance for any clue.
Aucun commentaire:
Enregistrer un commentaire