Menu
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.
990
Answer: Use the jQuery show() and hide() methods You can simply use the jQuery show() and hide() methods to show and hide the div elements based on the selection of radio buttons.
As a quick solution either you can apply colspan for your td or You can have both the radio button controls in same td so that the change due to long text wont affect the display of radiobutton.
To select a radio button by clicking on its text in React:Add a label element for each radio button. The htmlFor prop of each label should be set to the id of each radio button. Click on the label element to select the radio button.
$('#zone_r1').parent().hide();
works for me
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
