In radio button group, how can I make 2 of them enable a textbox and one of them disable/readonly the textbox

Question

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!

first, if i take your question right , you can't enable more than one radio button . use check boxs you can enable multiple options — Egy Success, Aug 01 '15 at 00:09
possible duplicate of [JQuery - checkbox enable/disable](http://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) — klenium, Aug 01 '15 at 00:11
@EgySuccess - You can *enable* more than one radio button, you just can't *check* more than one at a time in the same group. But that's not what the question is about anyway. — nnnnnn, Aug 01 '15 at 01:03

score 0 · Answer 1 · answered Aug 01 '15 at 00:03

0

You have to use .prop('disabled', true) or .prop('disabled', false) to toggle the disabled state. Using .attr will not always work.

answered Aug 01 '15 at 00:03

dave

62,300
5
72
93

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

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.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 01 '15 at 00:06

klenium

2,468
2
24
47

Pointy · Answer 3 · 2015-08-01T00:37:37.990

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.

In radio button group, how can I make 2 of them enable a textbox and one of them disable/readonly the textbox

3 Answers3