访问和验证表中的多个选择框与Jquery

我有一个表中的两列，并在每列是一个选择下拉列表。第二个下拉列表可以根据第一个下拉列表的值启用或禁用。访问和验证表中的多个选择框与Jquery

这适用于第一行，但是当我添加多行（实际上是在程序中动态完成的）时，“id”是相同的，启用和禁用验证失败 - 我怀疑是因为相同名。

任何想法如何最好地得到这与多行工作？的我至今那里

示例 - https://jsfiddle.net/dave_pace/L8naac5u/

<table id="example" > 
    <tr> 
    <th>Site</th> 
    <th>Location</th> 
    </tr> 

    <tr> 
    <td> 
     <select name="site" id="site"> 
     <option value="Local" selected="">Local</option> 
     <option value="Remote">Remote</option> 
     </select> 
    </td> 
    <td> 
     <select name="remotesite" id="remotesite" disabled> 
     <option value="&quot;"></option> 
     <option value="Acme Ltd 0001">Acme Ltd 0001</option> 
     <option value="Acme Ltd 0002">Acme Ltd 0002</option> 
     <option value="Acme Ltd 0003">Acme Ltd 0003</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <select name="site" id="site"> 
     <option value="Local" selected="">Local</option> 
     <option value="Remote">Remote</option> 
     </select> 
    </td> 

    <td> 
     <select name="remotesite" id="remotesite" disabled> 
     <option value="&quot;"></option> 
     <option value="Acme Ltd 0001">Acme Ltd 0001</option> 
     <option value="Acme Ltd 0002">Acme Ltd 0002</option> 
     <option value="Acme Ltd 0003">Acme Ltd 0003</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <select name="site" id="site"> 
     <option value="Local" selected="">Local</option> 
     <option value="Remote">Remote</option> 
     </select> 
    </td> 

    <td> 
     <select name="remotesite" id="remotesite" disabled> 
     <option value="&quot;"></option> 
     <option value="Acme Ltd 0001">Acme Ltd 0001</option> 
     <option value="Acme Ltd 0002">Acme Ltd 0002</option> 
     <option value="Acme Ltd 0003">Acme Ltd 0003</option> 
     </select> 
    </td> 
    </tr> 

</table> 

$(document).ready(function(){ 
    function updateTable() { 

     // alert('hi'); 

     // alert($(this).val()); 

     // alert($(this).text()); 

     if ($(this).val() == "Remote") { 
     document.getElementById('remotesite').disabled=false; 
     } 
     else { 
     document.getElementById('remotesite').disabled=true; 
     } 

    } 

    $("#site").change(updateTable); 

});

来源

2017-06-20 Dave Walker

警告： 你不应该使用相同的值声明多个ID的，对于您可以使用类。该id必须是唯一的，不像具有相同值的多个类。

解决方案： 从您选择的标签中删除您的标识并将您的标识替换为您的标识。

<script type="text/javascript"> 
$("select[name='site']").change(function(){ 
    var _this = $(this); 
    _this.parent().siblings().children("select[name='remotesite']").attr('disabled', false) 
}); 
</script>

来源

2017-06-20 14:27:54 Kreshnik

感谢您的答案Kreshnik - 将我整理出来：o） –

访问和验证表中的多个选择框与Jquery

回答

相关问题