javascript - 如何在 javascript 中启用/禁用表行中的输入字段而不影响其他行

Question

我有一个带有下拉菜单的表单，后跟一个文本输入字段。输入框默认是禁用的。从菜单中选择指定选项(“其他”)应启用文本字段。

注意:如果用户单击图标(+)，则可以添加多行。当某一行选择“OTHER”时，其他行不会受到影响。仅启用具有“OTHER”选项的行。

<tr id="dataRow">
    <td>+</td>
    <td>-</td>                                           
    <td>
        <select onChange="checkOption(this);">
         <option value="A">Option A</option>
         <option value="B">Option B</option>
         <option value="C">Option C</option>
         <option value="OTHER">Other</option>  
        </select>
    </td>                            
    <td><input id="inputTextBox"></td>  
</tr>

JavaScript:

function checkOption(obj) {
        var input = document.getElementById("inputTextBox");
        input.disabled = obj.value != "OTHER";
}

示例:

First Row: Selects OTHER (inputTextBox is enabled)
User add another Row: Selects Option A (inputTextBox is disabled)
User add another Row: Selects OTHER (inputTextBox is enabled)

当生成多行时，HTML 是这样的。共享相同的 ID、选项..

<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>
<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>
<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>

Answer 1

如果您想检查所选值并在客户端选择其他时禁用输入，这将起作用。

function checkOption(obj) {
    var input = document.getElementById("inputTextBox");
    if(obj.value=='OTHER'){
        input.disabled=true;
    }else{
        input.disabled=false;
    }
}

<select onChange="checkOption(this);">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="OTHER">Other</option>  
</select>
<br>     
<input id="inputTextBox"> 

<小时/>

或者

<小时/>

将创建一个值为 other 的新选项，并显示在选择的顶部。您可以给您的选择一个 ID 并调用此函数，它会在添加动态选项后检查所选选项。

function checkOption() {
    var input = document.getElementById("inputTextBox");
    var Index = document.getElementById("Options").selectedIndex;
    if(document.getElementById("Options")[Index].value=='OTHER'){
        input.disabled=true;
    }else{
        input.disabled=false;
    }
}

<小时/>

<select id="Options" onChange="checkOption();">

Using selectedIndex

document.getElementById("Options")[0] => A - Option A

document.getElementById("Options")[1] => B - Option B

document.getElementById("Options")[2] => C - Option C

document.getElementById("Options")[3] => OTHER - Other

如果您有任何疑问，请在下面发表评论，我会尽快回复您。

我希望这有帮助。快乐编码!