Question

我有一个带有下拉菜单的表单，后跟一个文本输入字段。默认情况下禁用输入框。从菜单中选择指定选项（＆＃34; OTHER＆＃34;）应启用文本字段。

注意：如果用户点击图标（+），则可以添加多行。当某行选择＆＃34; OTHER＆＃34;时，其他行不会受到影响。只有具有选项＆＃34; OTHER＆＃34;的行。将启用。

<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

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

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值的新选项，并显示在select的顶部。您可以选择一个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();">


使用selectedIndex

document.getElementById（“Options”）[0] =＆gt; A - 选项A

document.getElementById（“Options”）[1] =＆gt; B - 选项B

document.getElementById（“Options”）[2] =＆gt; C - 选项C

document.getElementById（“Options”）[3] =＆gt;其他 - 其他

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

我希望这会有所帮助。快乐的编码！

Answer 2

jQuery是一个选项吗？

如果是，请使用on()

根据文档，它甚至将事件绑定到尚未存在的元素。

Answer 3

我不确定我是否理解你想要实现的目标，但是如果它只是启用/禁用checkOption函数中的这样的文本字段应该可以完成这项工作：

function checkOption(obj) {
  if (obj.value == "OTHER"){
    if( document.getElementById("inputTextBox") != null)
      {
        document.getElementById("inputTextBox").disabled = false;
      } 
  }
  if (obj.value != "OTHER")
  {
    if( document.getElementById("inputTextBox") != null)
      {
        document.getElementById("inputTextBox").disabled = true;
      } 
  }

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

3 个答案: