Désactiver le bouton radio basé sur la sélection radio précédente

Je dois activer les options radio basées sur deux radios sélectionnées précédemment, J'ai déjà posé une question sur un pervious topic et j'ai essayé sans succès de l'adapter au nouveau besoin, et j'ai aussi essayé en utilisant la réponse à this topic, mais aussi sans succès ...Désactiver le bouton radio basé sur la sélection radio précédente

Voici donc plus de détails sur ce dont j'ai besoin: Je choisis une radio de chacun des deux groupes radio précédents, donc au troisième groupe devrait être disponible (activé) pour choisir uniquement les deux qui correspondent à la sélection précédente ...

Premier groupe: de, en, es, ca (sélectionné)

Deuxième groupe: de, en (sélectionné), es, ca

Troisième groupe: de (désactivé), en (activé), es (handicapés), ca (activé)

Et voici le code que je utilise:

$(document).ready(function() { 
 
    $('input[name=lang_or]').click(function() { 
 
    $('input[name=lang_tg]').prop('disabled', false); 
 
    $('input[name=lang_tg][value=' + this.value).prop('disabled', 'disabled'); 
 
    }); 
 
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
 
<table> 
 
    <tr> 
 
    <th>Origin language</th> 
 
    <th>Target language</th> 
 
    <th>Language to index first</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label><input type="radio" name="lang_or" value="de">German</label> 
 
     <label><input type="radio" name="lang_or" value="en">English</label> 
 
     <label><input type="radio" name="lang_or" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_or" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_or" value="fr">French</label> 
 
     <label><input type="radio" name="lang_or" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_or" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="lang_tg" value="de">German</label> 
 
     <label><input type="radio" name="lang_tg" value="en">English</label> 
 
     <label><input type="radio" name="lang_tg" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_tg" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_tg" value="fr">French</label> 
 
     <label><input type="radio" name="lang_tg" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_tg" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="language" value="de">German</label> 
 
     <label><input type="radio" name="language" value="en">English</label> 
 
     <label><input type="radio" name="language" value="ca">Catalan</label> 
 
     <label><input type="radio" name="language" value="es">Spanish</label> 
 
     <label><input type="radio" name="language" value="fr">French</label> 
 
     <label><input type="radio" name="language" value="it">Italian</label> 
 
     <label><input type="radio" name="language" value="pt">Portugues</label> 
 
    </td> 
 
    </tr> 
 
</table>

Source

2017-08-18 Andrés Chandía

Eh bien juste d'un coup d'oeil cliquez sur '$ (» input [name = lang_tg] [value = '+ this.value) 'Manque la fin du sélecteur. – Taplar

Je vous ai changé cliquez sur écouteur à $('input[name^=lang_]').click(function() { pour cible à la fois le premier et le deuxième groupe de boutons radio.

maintenant à l'intérieur vous cliquez sur écoute, vous pouvez vérifier que ces boutons radio qui sont cochés dans le premier et le deuxième groupe de boutons radio:

$('input[name^=lang_]:checked').each(function() { 
    $('input[name=language][value=' + $(this).val() + ']').prop('disabled', false); 
});

Voir la démo ci-dessous:

$(document).ready(function() { 
 

 
    // initialize all to disabled 
 
    $('input[name=language]').prop('disabled', true); 
 

 
    // click listener for 1st and 2nd groups 
 
    $('input[name^=lang_]').click(function() { 
 
    // disable all first 
 
    $('input[name=language]').prop('disabled', true); 
 
    // enable currently selected radios 
 
    $('input[name^=lang_]:checked').each(function() { 
 
     $('input[name=language][value=' + $(this).val() + ']').prop('disabled', false); 
 
    }); 
 
    }); 
 
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
 

 
<table> 
 
    <tr> 
 
    <th>Origin language</th> 
 
    <th>Target language</th> 
 
    <th>Language to index first</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label><input type="radio" name="lang_or" value="de">German</label> 
 
     <label><input type="radio" name="lang_or" value="en">English</label> 
 
     <label><input type="radio" name="lang_or" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_or" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_or" value="fr">French</label> 
 
     <label><input type="radio" name="lang_or" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_or" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="lang_tg" value="de">German</label> 
 
     <label><input type="radio" name="lang_tg" value="en">English</label> 
 
     <label><input type="radio" name="lang_tg" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_tg" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_tg" value="fr">French</label> 
 
     <label><input type="radio" name="lang_tg" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_tg" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="language" value="de">German</label> 
 
     <label><input type="radio" name="language" value="en">English</label> 
 
     <label><input type="radio" name="language" value="ca">Catalan</label> 
 
     <label><input type="radio" name="language" value="es">Spanish</label> 
 
     <label><input type="radio" name="language" value="fr">French</label> 
 
     <label><input type="radio" name="language" value="it">Italian</label> 
 
     <label><input type="radio" name="language" value="pt">Portugues</label> 
 
    </td> 
 
    </tr> 
 
</table>

Source

2017-08-18 15:41:31 kukkuz

Merci beaucoup, je viens d'ajouter votre fonction, car si je modifie le précédent, je perds la possibilité de désactiver le bouton radio coïncident du deuxième groupe. –

Vous pouvez obtenir un tableau de valeurs des deux premiers groupes d'entrée et vérifier chaque entrée du troisième groupe si sa valeur est dans le tableau et l'invalider sinon.

var i = $('input[name="language"]'); 
 
i.prop('disabled', true) 
 

 
$("input[type='radio']").click(function() { 
 
    var val = $('input[name=lang_or]:checked, input[name=lang_tg]:checked').map(function() { 
 
    return $(this).val() 
 
    }).get() 
 

 
    i.each(function() { 
 
    $(this).prop('disabled', !val.includes($(this).val())) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Origin language</th> 
 
    <th>Target language</th> 
 
    <th>Language to index first</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <label><input type="radio" name="lang_or" value="de">German</label> 
 
     <label><input type="radio" name="lang_or" value="en">English</label> 
 
     <label><input type="radio" name="lang_or" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_or" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_or" value="fr">French</label> 
 
     <label><input type="radio" name="lang_or" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_or" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="lang_tg" value="de">German</label> 
 
     <label><input type="radio" name="lang_tg" value="en">English</label> 
 
     <label><input type="radio" name="lang_tg" value="ca">Catalan</label> 
 
     <label><input type="radio" name="lang_tg" value="es">Spanish</label> 
 
     <label><input type="radio" name="lang_tg" value="fr">French</label> 
 
     <label><input type="radio" name="lang_tg" value="it">Italian</label> 
 
     <label><input type="radio" name="lang_tg" value="pt">Portugues</label> 
 
    </td> 
 
    <td> 
 
     <label><input type="radio" name="language" value="de">German</label> 
 
     <label><input type="radio" name="language" value="en">English</label> 
 
     <label><input type="radio" name="language" value="ca">Catalan</label> 
 
     <label><input type="radio" name="language" value="es">Spanish</label> 
 
     <label><input type="radio" name="language" value="fr">French</label> 
 
     <label><input type="radio" name="language" value="it">Italian</label> 
 
     <label><input type="radio" name="language" value="pt">Portugues</label> 
 
    </td> 
 
    </tr> 
 
</table>

Source

2017-08-18 15:47:38

Merci beaucoup, ça marche aussi ... –

U dit:

I sélectionner une radio à partir de chacun des deux groupes de radio précédents, donc au troisième groupe doit être disponible (activé) pour choisir uniquement celles deux qui correspondent à la sélection précédente ...

F Les premiers boutons radio sont là pour un seul choix. Donc, vous ne pouvez pas vérifier plus d'une langue de cette façon ..

si vous voulez choisir seulement un, que d'utiliser la radio ..

J'ai fait quelques changements dans votre js aussi jeter un oeil: https://jsfiddle.net/eb7u4zu8/1/

HTML:

<table> 
<tr> 
    <th>Origin language</th> 
    <th>Target language</th> 
    <th>Language to index first</th></tr> 
<tr><td> 
<label><input type="radio" name="lang_or" value="de">German</label> 
<label><input type="radio" name="lang_or" value="en">English</label> 
<label><input type="radio" name="lang_or" value="ca">Catalan</label> 
<label><input type="radio" name="lang_or" value="es">Spanish</label> 
<label><input type="radio" name="lang_or" value="fr">French</label> 
<label><input type="radio" name="lang_or" value="it">Italian</label> 
<label><input type="radio" name="lang_or" value="pt">Portugues</label> 
</td><td> 
<label><input type="radio" name="lang_tg" value="de">German</label> 
<label><input type="radio" name="lang_tg" value="en">English</label> 
<label><input type="radio" name="lang_tg" value="ca">Catalan</label> 
<label><input type="radio" name="lang_tg" value="es">Spanish</label> 
<label><input type="radio" name="lang_tg" value="fr">French</label> 
<label><input type="radio" name="lang_tg" value="it">Italian</label> 
<label><input type="radio" name="lang_tg" value="pt">Portugues</label> 
</td><td class='thirdGroup'> 
<label><input type="checkbox" name="language" value="de">German</label> 
<label><input type="checkbox" name="language" value="en">English</label> 
<label><input type="checkbox" name="language" value="ca">Catalan</label> 
<label><input type="checkbox" name="language" value="es">Spanish</label> 
<label><input type="checkbox" name="language" value="fr">French</label> 
<label><input type="checkbox" name="language" value="it">Italian</label> 
<label><input type="checkbox" name="language" value="pt">Portugues</label> 
</td></tr> 
</table>

JS:

$(document).ready(function() { 

    $('input[name=language]').attr("disabled", true); 

    $('input[name=lang_or]').change(function(){ 
    enableDisable($("input[name=lang_or]:checked").val(), $("input[name=lang_tg]:checked").val()); 
    }); 

    $('input[name=lang_tg]').change(function(){ 
    enableDisable($("input[name=lang_or]:checked").val(), $("input[name=lang_tg]:checked").val()); 
    }); 


}); 

function enableDisable(lang_or, lang_tg){ 
    if($('input[name=lang_or]').is(":checked") && $('input[name=lang_tg]').is(":checked")){ 
    $('input[name=language]').attr("disabled", true).prop('checked', false); 

     $("input[name=language][value="+lang_or+"]").prop('checked', true).attr("disabled", false); 
    $("input[name=language][value="+lang_tg+"]").prop('checked', true).attr("disabled", false); 
    }else{ 
    $('input[name=language]').attr("disable", true); 
    } 
}

Source

2017-08-18 15:52:48

Merci, ça marche aussi, mais ce n'est pas si intuitif pour l'utilisateur, j'ai changé la case à cocher en radio pour ne pouvoir sélectionner qu'un seul du troisième groupe, et ça se voit sélectionné automatiquement la langue égale au deuxième groupe. Et je dois aussi garder la fonction que j'ai mentionnée au fil précédent https://stackoverflow.com/questions/45740772/how-can-one-avoid-selecting-2-radio-buttons-with-the-same-value –

Compris, bonne chance :) –

Désactiver le bouton radio basé sur la sélection radio précédente

Répondre

Questions connexes