I have 3 Radio Buttons, and I need 2 of them to enable the textbox.
So far I have it set up as follows.
<form id="form1" name="form1" method="post" action="">
<table width="250">
<tr>
<td>
<label>
<input type="radio" name="RadioGroup1" value="B1" id="RadioGroup1_0" />Quote
</label>
</td>
<td>
<label>
<input type="radio" name="RadioGroup1" value="B2" id="RadioGroup1_1" />Bind
</label>
</td>
<td>
<label>
<input type="radio" name="RadioGroup1" value="B3" id="RadioGroup1_2" />Quote/Bind
</label>
</td>
</tr>
</table>
<br />
<label>
Effective Date/Time
<input name="EffDate" type="text" id="EffDate" placeholder="yyyy/mm/dd hh:mm HRS" disabled="disabled"/>
</label>
</form>
And I have one button set up to enable the textbox
$('#RadioGroup1_1').change(function(){
$('#EffDate').removeAttr('disabled');
});
$('#RadioGroup1_2').change(function(){
$('#EffDate').removeAttr('disabled');
});
My Problem is that after clicking RadioGroup1_1 or 1_2 The "effdate" textbox does not go back to its disabled state. I only want the box enabled while the radio button is selected.
I've tried looking into it but cannot find my specific answer, and in the interest of full disclosure this is all very new to me!
Thanks!
You have to use .prop('disabled', true)
or .prop('disabled', false)
to toggle the disabled state. Using .attr
will not always work.
You need to set the element's disabled
property to true/false
:
$('#RadioGroup1_1, #RadioGroup1_2').click(function() {
$('#EffDate').prop('disabled', false);
});
$('#RadioGroup1_0').click(function() {
$('#EffDate').prop('disabled', true);
});
Note: you should use .click
and not .change
on checkbox/radio.
Radio buttons are tricky: when one changes, they all change (well all in the same group), but only one of them gets the event!
I like to use "click" and not "change", because older versions of IE won't fire "change" until the element loses focus.
$(document).on("click synchronize", "input[name='RadioGroup1']", function() {
$("#EffDate").prop("disabled", $("#RadioGroup1_1:checked, #RadioGroup1_2:checked").length > 0);
});
$("#RadioGroup1_0").trigger("synchronize");
So any click on any of the three radio buttons will trigger that "click" handler. The handler will check to see if either button 1 or button 2 is checked, and set the "disabled" property of the text field from that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.