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);
    });
});

Answer 2

此代码仅适用于具有两个选择选项的一行，这非常适合您的示例。

var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
    selectTag[1].disabled = true;  
    selectTag[0].addEventListener("change", function(){
      if(selectTag[0].value == 3){
        selectTag[1].disabled = false;
      }
      else{
        selectTag[1].disabled = true;
      }
    });

Answer 3

要取消select的使用，您只需要使用setAttribute或disabled来添加element.disabled = true属性，然后使用listen for the change中的另一个选择并检查其值，如果等于3，请删除disabled，

let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;

let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {

  if (+this.value === 3) // the + sign is a shorthand for parseInt
    td2.disabled = false ;
  else
    td2.disabled = true ;
})

<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>

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

3 个答案: