0
votes

Activation / désactivation des boutons radio selon l'état d'une case à cocher

J'ai un formulaire avec plusieurs cases à cocher et, au-dessous de chacune de ces cases à cocher, un ensemble de boutons radio. Je veux désactiver et réinitialiser les boutons radio lorsque la case à cocher correspondante n'est pas cochée ou non cochée.

J'ai essayé d'activer les boutons radio à l'aide du sélecteur JQuery : radio [nom = vid] code> mais ça ne fait pas " t Travaux. P>

<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);
        }
    });
});


1 commentaires

La variable vid à l'intérieur de votre sélecteur est en cours de traitement comme une chaîne littérale, vous devez le concaténer: $ (': radio [nom = "' + vid + '"]') < / code>


3 Réponses :


0
votes

Votre problème ici est la concaténation, vous devez concatez pour ajouter une variable vid fort> dans votre sélecteur, dans JavaScript, l'opérateur de concaténation est + fort>

Votre code doit être Comme ceci: p>

p>

$(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);
        }
    });
});


0 commentaires

0
votes

Dans jQuery, vous devez obtenir les radiobuttons du parent

    code> de la case code> comme ceci: $ (this) .cousest ('ul' )Find ("Entrée [Type = 'Radio']") ") Code>

    p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <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>
    </form>


2 commentaires

Merci beaucoup. La concaténation doit être la solution. J'ai besoin d'utiliser jQuery car il existe un nombre non défini de cases à cocher et de leurs boutons radio.


Ma solution fonctionne pour des cases à cocher infinies et des radiobuttons.



0
votes

Je ferais quelque chose comme ça. Vous n'avez même pas besoin de jQuery ... xxx


0 commentaires