訪問和驗證表中的多個選擇框與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

回答

相關問題