jquery - hidden（）ラジオボタン*および*jqueryのテキストラベル

Question

アクセシビリティの問題を整理する最近のプロジェクトに戻り、すべてのフォーム要素にラベルが付いていることを確認しました。ラベルテキストをタグに入れると、以前に書いた厄介なコードで問題が発生しました。

基本的に、ラジオボタンとそのラベルがある場合：

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

そして、jqueryを使用して次のように非表示にします。

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

実際のボタンは非表示になっていますが、ラベルテキストは非表示になっています。もともと私はラベルテキストのスパンを作成し、そのように隠しました：

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

と

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

何か案は？私はクラッジを使用しないことを好みます、そしてそれはラベルのスパンで検証されないかもしれません、しかし多分私は過度に熱心です。

Answer 1

私はこれがあなたのために働くべきだと思います

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

これにより、探しているラジオ ボタンに「for」属性が設定されたラベルと、ラジオ ボタン自体が選択され、両方が非表示になります。

Answer 2

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

私のために働く

Answer 3

どうですか$('label:has(#zone_r1)').hide();

Answer 4

最初のラジオボタンでは、実際のボタンを非表示にしてから、その親を非表示にすることができます。

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

2番目のケースでは、ボタンと「次の」兄弟を非表示にできます。

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

Answer 5

親に「ラベル」セレクターを配置するだけです：

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

私のjsFiddleの例を見てください

Answer 6

あなたはこれを行うことができます：

1.) 周囲のラベルなしでラジオ ボタン入力を定義します。

2.) 「オプション テキスト」(ラジオ ボタンの右側のテキスト) を で囲みます<span>。

3.) 次の jQuery ステートメントを使用します。$("input:radio:not(:checked), input:radio:not(:checked) + span").hide();

これにより、ラジオ ボタンとラジオ ボタンの右側のテキストが選択され、非表示になります。

Answer 7

値に基づいてラジオ ボタン コンテナまたは TD を非表示にする

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