在单选按钮组中，如何使其中两个启用一个文本框，而其中一个禁用/只读该文本框

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!

Answer 1

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

Answer 2

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.

Answer 3

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.