动态新增表格行后，Select选Other无法启用对应输入框求助

问题根源 #

问题出在重复使用ID和事件处理逻辑绑定固定ID上：

• ID是页面唯一标识，新增行后多个元素共用同一个ID，getElementById只会返回第一个匹配的元素，导致新增行的操作永远只影响第一行的输入框。
• 原checkRequestType函数硬编码查找固定ID，无法关联当前操作的行。

修复方案 #

1. 把所有重复的ID替换为类（ID不能重复，类可复用）
2. 修改checkRequestType函数，让它接收当前触发事件的下拉框元素，通过DOM关系找到同一行对应的"Please Specify"输入框
3. 调整新增行的HTML模板，同步替换ID为类，并在onclick中传递当前元素
4. 调整移除按钮的事件委托，改为监听类选择器

修改后的完整代码 #

HTML部分

<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 class="itemNum" style="font-size: 23px;">0</span></center></td>
            <td><input type="text" class="form-control requestFor" placeholder="Teacher's name"></td>
            <td>
                <div class="row">
                    <div class="col">
                        <select name="requestType" onclick="checkRequestType(this)" class="form-control requestType" required>
                            <option value="Sick leave">Sick leave</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="col">
                        <input type="text" name="requestType" class="form-control otherType" disabled placeholder="Please Specify">
                    </div>
                </div>
            </td>
            <td><input type="text" class="form-control description" placeholder="Leave additional information/comment here"></td>
            <td>
                <button type="button" class="btn btn-danger remove"><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>

新增行的JavaScript代码

<script type="text/javascript">
$(document).ready(function(){
    var html = '<tr><td class="border"><center><span class="itemNum" style="font-size: 23px;">0</span></center></td><td><input type="text" class="form-control requestFor" placeholder="Teacher\'s name"></td><td><div class="row"><div class="col"><select name="requestType" onclick="checkRequestType(this)" class="form-control requestType" 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 value="Other">Other</option></select></div><div class="col"><input type="text" name="requestType" class="form-control otherType" disabled placeholder="Please Specify"></div></div></td><td><input type="text" class="form-control description" placeholder="Leave additional information/comment here"></td><td><button type="button" class="btn btn-danger remove"><i class="bi bi-x-lg"></i></button></td></tr>';

    var x = 1;
    $('#add').click(function(){
        $("#main_table").append(html);
        x++;
    });

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

下拉选择检查的JavaScript代码

<script type="text/javascript">
function checkRequestType(selectElement){
    const otherInput = selectElement.closest('.row').querySelector('.otherType');
    if(selectElement.value === "Other"){
        otherInput.disabled = false;
        console.log("true");
    }else{
        otherInput.disabled = true;
        console.log("false");
    }
}
</script>

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

关键修改点说明 #

• ID改类：将requestType、OtherType等重复ID替换为类，避免页面元素标识冲突。
• 传递当前元素：通过onclick="checkRequestType(this)"把当前操作的下拉框传给函数，确保能定位到对应行的输入框。
• DOM关系定位：用closest('.row')找到当前下拉框所在的容器，再通过querySelector('.otherType')匹配同组输入框，确保操作的是当前行的元素。

内容的提问来源于stack exchange，提问作者Aldrin John Villasis