在單選按鈕組中，如何使其中兩個啟用一個文本框，而其中一個禁用/只讀該文本框

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”屬性。