Désélectionnez le Bouton Radio si un autre est sélectionné

Considérant le balisage suivant:

<form>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_1">First choice</label><input type="radio" name="firstchoice" value="1" id="firstchoice_1" /></li>
    <li><label for="secondchoice_1">Second choice</label><input type="radio" name="secondchoice" value="1" id="secondchoice_1" /></li>
</ul>
</div>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_2">First choice</label><input type="radio" name="firstchoice" value="2" id="firstchoice_2" /></li>
    <li><label for="secondchoice_2">Second choice</label><input type="radio" name="secondchoice" value="2" id="secondchoice_2" /></li>
</ul>
</div>

</form>

Ce que je veux faire est de les désactiver si le bouton radio dans chaque .project groupe chaque fois que l'autre a été sélectionné (si seulement First choice ou Second choice dans chaque groupe peut être sélectionné). Ce que je sais faire est de désactiver un bouton radio dans un cas précis, mais je ne sais pas comment généraliser ce qu'ils peuvent sont d'une centaine de ces .project groupes.

Modifier: Veuillez noter que seuls de l'ensemble de la First choice (et vice versa) peut être sélectionné. Le même nom est déjà utilisé. La même name attribut est utilisé tout au long de l'ensemble du balisage. Il y a seulement deux names.

Il est préférable de question! Je suis en train de travailler sur une application mobile où chaque bouton radio permet de basculer d'un formulaire distinct, de sorte que les boutons ne font pas partie du même groupe..donc la native de comportement ne fonctionne plus.

OriginalL'auteur testit | 2011-08-28

  1. 10

    Simplement leur donner le même name mais différents values; ce sera alors automatiquement que c'est la façon dont les boutons radio sont conçus.

    Veuillez voir mon edit.

    OriginalL'auteur Sophie Alpert

  2. 2

    Vous devez écouter l'événement de changement sur tous les boutons radio. Lorsque l'un de ces changements, vous aurez pour vérifier s'il s'est vérifié. Si c'était le cas, vous serez alors décochez toutes les autres boutons radio à l'intérieur de cette .project:

    $('input[type=radio]').change(function()
{
    if (this.checked)
    {
        $(this).closest('.project')
            .find('input[type=radio]').not(this)
            .prop('checked', false);
    }
});
    Semble prometteur, je vais vérifier celui-ci dehors.

    OriginalL'auteur Joseph Silber

  3. 2

    Si vous donnez la même name à un ensemble de boutons radio puis ils automatiquement cocher/décocher à chaque fois que vous cliquez sur eux. Mais l'id doit être unique pour chacun des boutons radio qui n'est pas là votre balisage. Jetez un oeil à ce travail de démonstration, j'espère que c'est ce que vous cherchez.

    De travail démo

    OriginalL'auteur ShankarSangoli

  4. 0

    Vous avez juste à utiliser le même nom pour tous les boutons dans un groupe. Ensuite, le navigateur ne le désactiver automatiquement.

    Veuillez voir mon edit.

    OriginalL'auteur migu

  5. -1

    Vous avez juste à utiliser le même nom pour tous les boutons dans un groupe. Ensuite, le navigateur ne le désactiver automatiquement.

    u peut modifier l'id de valeurs différentes si tu veux

    OriginalL'auteur Ritam