使用JavaScript的一个复选框禁用选择框并启用文本框

Question

我对JavaScript相当陌生； 我整天都在搜索，但是我只发现了如何使用一个复选框启用和禁用一个文本框。

这是我的代码

的JavaScript

 function enable_text(status){
     status=!status;    
     document.sr2.other_text.disabled = status;
 }

的HTML

<form name=sr2 method=post>
    <input type="checkbox" name=others onclick="enable_text(this.checked)">
    Others
    <input type=text name=other_text>
</form>

注意：我发布的代码仅用于文本框，当取消选中复选框时，该文本框将启用。

我的问题是，如何在取消选中复选框后禁用选择标记并启用文本框？

Answer 1

在您的文本框中添加一个ID，然后只需将复选框的下面onclick放在下面即可，而不是函数调用。

 <form name=sr2 method=post>
 <input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
 <input type=text name=other_text>

Answer 2

根据您的问题，您是否要显示一个下拉菜单，然后允许他们输入其他不在下拉菜单中的值？

如果是这样，这是另一种解决方法：

HTML：

<select name="RenewalTerm" id="RenewalTerm">
    <option value="12">12 Month</option>
    <option value="24">24 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
    <label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
    <input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>

JavaScript / jQuery：

$(document).ready(function() {
    $('#RenewalTermOtherFields').hide();
    $('#RenewalTermManual').val($('#RenewalTerm').val());
    $('#RenewalTerm').change(function() {
        var selectedItem = $("select option:selected").val();
        if (selectedItem !== 'Other') {
            $('#RenewalTermOtherFields').hide();
            $('#RenewalTermManual').val($('#RenewalTerm').val());
        }
        else
        {
            $('#RenewalTermManual').val('');
            $('#RenewalTermOtherFields').show();
        }
    });
});

观看实际操作！： http : //eat-sleep-code.com/#/javascript/dropdown-with-other-field

这将允许您从列表中选择“其他”，并且当您执行此操作时，它将自动显示一个文本框，用于自由格式输入。

Answer 3

这是HTML

<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
    <option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text

JavaScript是

function enableText(checked){
    if(!checked){
        document.getElementById('sel').disabled = true;
        document.getElementById('txt').disabled = false;
    }
    else{
        document.getElementById('sel').disabled = false;
        document.getElementById('txt').disabled = true;
    }
}

在取消选中复选框后，将禁用“选择”功能并启用了文本，反之亦然。 希望有帮助。