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

Question

I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option ("OTHER") from the menu should enable the text field.

Note: The user can add multiple row(s) if he clicks on the icon(+). The other row(s) will not be affected when a certain row selects "OTHER". Only the row(s) having the option "OTHER" will be enable.

<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";
}

Sample:

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)

The HTML is something like this when multiple row(s) is generated. Sharing the same ids, options..

<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

If you want to check the selected value and disable the input if the client selects other this will work.

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

---

Or

---

a new option with the value of other is created and appears at the top of the select. You can give your select an ID and call this function and it will check the selected option after the dynamic option has been added.

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

If you have any questions please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Answer 2

Is jQuery an option?

If yes use on()

According to docs it binds event even to not yet existing elements.

Answer 3

I am not sure I understand what exactly you are trying to achieve but if its just enabling/disabling the text field something like this in your checkOption function should do the job:

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