JavaScript：下拉 select“其他”旁边的输入字段将启用

Question

My dropdown works when I only have 1 row of input fields, but when I click "add" to append new row of input fields it does not work now.

I want the new row that I append to enable "Please specify" whenever I choose "other"

note: that "Sick leave" is a drop down.

<table id="main_table" class="table">
                <thead>
                    <tr>
                        <td class="border">No.</td>
                        <td class="border">Name</td>
                        <td class="border">Request Type</td>
                        <td class="border">Add. Information / Comment</td>
                        <td class="border">action</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td>
                        <td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher's name" id="floatingTextarea1"></td>
                        <td>
                            <div class="row">
                                <div class="col">
                                    <select name="requestType" onclick="checkRequestType()" id="requestType" class="form-control"  required>
                    
                                      <option value="Sick leave">Sick leave</option>
                                    <option >Other</option>
                                  </select>
                                </div>
                                <div class="col">
                                    <input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify">
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2">
                        </td>
                        <td>
                            <button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button>
                        </td>
                    </tr>                   
                </tbody>
            </table>
            <button class="btn btn-success" type="button" name="add" id="add">ADD</button>

here is the javascript i used to append or add new row to the table.

<script type="text/javascript">
    //---------------------------------//
    //script to add new input fields---//
    //---------------------------------//
                $(document).ready(function(){
                    var html = '<tr><td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td><td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher\'s name" id="floatingTextarea1"></td><td><div class="row"><div class="col"><select name="requestType" onclick="checkRequestType()" id="requestType" class="form-control"  required><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option >Other</option></select></div><div class="col"><input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify"></div></div></td><td><input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2"></td><td><button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button></td></tr>';
                               


                    var x = 1;
                    var num = 1;
                     $('#add').click(function(){
                        
                        if(true) {

                            $("#main_table").append(html);
                            x++;
                              
                        }
                       
                    });
                      
                      $('#main_table').on('click','#remove',function(){
                        
                        $(this).closest('tr').remove();
                        x--;
                    });


            });
        </script>

here is the javascript I used to check If the tropdown contains "other" to enable the input field next to it.

<script type="text/javascript">
  function checkRequestType(){
    if(document.getElementById("requestType").value == "Other"){
      document.getElementById("OtherType").disabled = false;
      console.log("true");
    }else{
      document.getElementById("OtherType").disabled = true;
      console.log("false");
    }
  }
</script>

<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>

Answer 1

your function will not work because you have tried to get elements by id that will pick only the first occurrence of element.

so you can use "this" and "closest" like this

function checkRequestType(e){
   var element = e;
   var target = element.parentElement.nextSibling.firstChild;
   if(element.value == "Other"){
      target.disabled = true;
   }else{
     target.disabled = false;
   }
}

add this function like this

<select onchange="checkRequestType(this)">

Answer 2

you can use this code i have test this

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<body>
  <table id="main_table" class="table">
    <thead>
      <tr>
        <td class="border">No.</td>
        <td class="border">Name</td>
        <td class="border">Request Type</td>
        <td class="border">Add. Information / Comment</td>
        <td class="border">action</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border">
          <center><span id="itemNum" style="font-size: 23px;">0</span></center>
        </td>
        <td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher's name"
            id="floatingTextarea1"></td>
        <td>
          <div class="row">
            <div class="col">
              <select name="requestType" id="requestType" class="form-control request_type" required>

                <option value="Sick leave">Sick leave</option>
                <option>Other</option>
              </select>
            </div>
            <div class="col">
              <input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled="disabled"
                placeholder="Please Specify">
            </div>
          </div>
        </td>
        <td>
          <input type="text" name="" class="form-control" name="description"
            placeholder="Leave additional information/comment here" id="floatingTextarea2">
        </td>
        <td>
          <button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-success" type="button" name="add" id="add">ADD</button>
  <script type="text/javascript">
    //---------------------------------//
    //script to add new input fields---//
    //---------------------------------//
    $(document).ready(function () {
      var html = '<tr><td class="border"><center><span id="itemNum" style="font-size: 23px;">0</span></center></td><td><input type="text" name="" class="form-control" name="requestFor" placeholder="Teacher\'s name" id="floatingTextarea1"></td><td><div class="row"><div class="col"><select name="requestType" id="requestType" class="form-control request_type"  required><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option value="Sick leave">Sick leave</option><option >Other</option></select></div><div class="col"><input type="text" name="requestType" id="OtherType" value="" id="school" class="form-control" disabled placeholder="Please Specify"></div></div></td><td><input type="text" name="" class="form-control" name="description" placeholder="Leave additional information/comment here" id="floatingTextarea2"></td><td><button type="button" name="remove" id="remove" class="btn btn-danger"><i class="bi bi-x-lg"></i></button></td></tr>';
      var x = 1;
      var num = 1;
      $('#add').click(function () {
        if (true) {
          $("#main_table").append(html);
          x++;
        }
      });

      $('#main_table').on('click', '#remove', function () {
        $(this).closest('tr').remove();
        x--;
      });

      $('body').on('change', '.request_type',function() {
        var element = $(this);
        var target = element.parent().parent().next().children();
        console.log(target)
        if (element.val() == "Other") {
          console.log(element.parent().parent().find('#OtherType'))
          // target.prop("disabled", false);
          element.parent().parent().find('#OtherType').removeAttr("disabled")
        } else {
          target.attr('disabled', true);
        }
      })

    });
  </script>
</body>

</html>