javascript - 遍历表行并禁用第二列中的输入

Question

请看下面的代码。

<table>
 <tr>
     <td>
          <select name='td1'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
     <td>
          <select name='td2'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
  </tr>


</table>

JavaScript:

<script>
document.getElementsByTagName("tr").each(function(){
   $(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>

要求是 1. 默认情况下，第二列中的选择字段(即第二个 td 的选择)必须禁用。 2. 只有当用户在第一个选择字段中选择第三个选项时，第二个选择字段才能启用。 3.解决方案必须是纯javascript(不使用jquery)

提前致谢。

Answer 1

Array.from(document.querySelectorAll('tr')).forEach(tr => {
    const secondSelect = tr.children[1].querySelector('select');
    secondSelect.disabled = true;
    tr.querySelector('td select').addEventListener('change', function() {
        secondSelect.disabled = (this.value != 3);
    });
});