Masquer le bouton radio * et * son libellé texte dans jQuery

Question

Je reviens sur un projet récent qui résout les problèmes d’accessibilité et s’assurait que tous les éléments de formulaire avaient des étiquettes. Le fait de placer le texte de l'étiquette dans une balise a posé un problème avec le code kludgy que j'avais écrit auparavant.

En gros, si vous avez un bouton radio et son libellé:

<label for="zone_r1"><input type="radio" name="zone" id="zone_r1" value="NY" />New York</label>

Et vous utilisez jquery pour le cacher de la manière suivante:

$('#zone_r1').hide();

Le bouton actuel est masqué mais pas le texte de l'étiquette. À l’origine, j’ai fait une étendue pour le texte de l’étiquette et je l’avais caché comme ça:

<input id="NY" type="radio" name="zone" value="NY" /><span id="nyTXT">New York</span>

et

$('#NY').hide();
$('#nyTXT').hide();

Des idées? Je préfère ne pas utiliser le kludge et cela peut ne pas valider avec l'envergure de l'étiquette, mais peut-être que je suis trop zélé.

Answer 1

$('#zone_r1').parent().hide();

travaille pour moi

Answer 2

Je pense que cela devrait fonctionner pour vous

$("label[for=zone_r1],#zone_r1").hide();

Ceci sélectionne l'étiquette avec le " pour " attribuez la valeur au bouton radio que vous recherchez, ainsi que le bouton radio lui-même, et les masque tous les deux

Answer 3

Qu'en est-il de $('label:has(#zone_r1)').hide();

Answer 4

Pour le premier bouton radio, vous pouvez masquer le bouton réel, puis son parent :

$('#zone_r1').hide().parent().hide();

Pour le second cas, vous pouvez masquer le bouton et le " suivant " frère / sœur:

$('#NY').hide().next().hide();

Answer 5

Vous pouvez faire ceci:

1.) Définissez l'entrée du bouton radio sans étiquette entourante.

2.) Entourez le " texte de l’option " (texte à droite du bouton radio) dans un <span>.

3.) Utilisez cette instruction jQuery: $("input:radio:not(:checked), input:radio:not(:checked) + span").hide();

Ceci sélectionnera le bouton radio et le texte à droite du bouton radio et le masquera.

Answer 6

Il suffit de placer le sélecteur 'label' dans le parent:

$(':radio[id=zone_r1]').parent('label').hide();

Voir mon exemple jsFiddle

Answer 7

masquer le conteneur de boutons radio ou le TD en fonction de la valeur

jQuery (" input [type = radio] [value = 'EU2'] "). parent (). hide ();