hide() radio button *and* its text label in jquery

不问归期 提交于 2020-01-01 08:53:46

问题


I am going back over a recent project sorting out accessibility issues and was making sure all form elements had labels. Putting the label text into a tag caused a problem with some kludgy code I had written before.

Basically, if you have a radio button and its label:

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

And you use jquery to hide it like so:

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

The actual button is hidden but not the label text. Originally I made a span for the label text and hid that like so:

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

and

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

Any ideas? I prefer not to use the kludge and it may not validate with the span in the label, but maybe I am being overly zealous.


回答1:


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

works for me




回答2:


I think this should work for you

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

This selects the label with the "for" attribute set to the radio button your looking for, as well as the radio button itself, and hides them both




回答3:


what about $('label:has(#zone_r1)').hide();




回答4:


For the first radio button, you can hide the actual button and then its parent:

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

For the second case you can hide the button and the "next" sibling:

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



回答5:


You can do this:

1.) Define the radio button input without a surrounding label.

2.) Wrap the "option text" (text to the right of the radio button) in a <span>.

3.) Use this jQuery statement: $("input:radio:not(:checked), input:radio:not(:checked) + span").hide();

This will select the radio button and the text to the right of the radio button and hide it.




回答6:


Just put 'label' selector in parent:

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

See my jsFiddle example




回答7:


hiding radio button container or TD based on value

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



来源:https://stackoverflow.com/questions/643704/hide-radio-button-and-its-text-label-in-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!