dimanche 21 avril 2019

Enabling/disabling radio buttons according to the state of a checkbox

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