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

Question

我有3个单选按钮，我需要其中2个才能启用文本框。

到目前为止，我将其设置如下。

<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>

我设置了一个按钮来启用文本框

$('#RadioGroup1_1').change(function(){
    $('#EffDate').removeAttr('disabled');
});

$('#RadioGroup1_2').change(function(){
    $('#EffDate').removeAttr('disabled');
});

我的问题是，单击RadioGroup1_1或1_2后，“ effdate”文本框不会返回其禁用状态。 我只希望在选中单选按钮时启用该框。

我曾尝试研究它，但找不到我的具体答案，为了全面披露，这对我来说是非常新的！

谢谢！

Answer 1

您必须使用.prop('disabled', true)或.prop('disabled', false)来切换禁用状态。 使用.attr并非总是可行。

Answer 2

您需要将元素的disabled属性设置为true/false ：

$('#RadioGroup1_1, #RadioGroup1_2').click(function() {
    $('#EffDate').prop('disabled', false);
});
$('#RadioGroup1_0').click(function() {
    $('#EffDate').prop('disabled', true);
});

注意：您要使用的.click ，而不是.change上复选框/收音机。

Answer 3

单选按钮很棘手：当一个按钮更改时，它们全部都会更改（并且都在同一组中），但是只有一个按钮可以获取事件！

我喜欢使用“单击”而不是“更改”，因为较早版本的IE不会在元素失去焦点之前触发“更改”。

$(document).on("click synchronize", "input[name='RadioGroup1']", function() {
    $("#EffDate").prop("disabled", $("#RadioGroup1_1:checked, #RadioGroup1_2:checked").length > 0);
});
$("#RadioGroup1_0").trigger("synchronize");

因此，只要单击三个单选按钮中的任何一个，就会触发该“单击”处理程序。 处理程序将检查按钮1或按钮2是否被选中，并从中设置文本字段的“ disabled”属性。