Javascript 不启用 html 表单

Question

我已经很久没有在 JS 中工作了，我正在尝试在选择某些选定选项时使用 select 启用另一个 html 表单。这是我的脚本:

<script>
function Activar() {


var e = document.getElementById('perm_tipo');
var strUser = e.options[e.selectedIndex].text;

    if(strUser=="familiar"){

    document.getElementById('paciente').disabled = false;
    }else{

    document.getElementById('paciente').disabled = true;
    }
}

我在表单中选择了那些 html，我认为这可能是问题所在，但在谷歌上进行检查似乎不应该成为问题。

这是我的 html 代码:

<form id="registro" action="admin_panel.php" method="post">  
<table border="0">
      <tr>
      <td>Tipo de permiso</td>
      <td>
            <select name="perm_tipo"  onchange="Activar()">
            <?php
                permiso();
                ?>
            </select>

        <br>
      </td>
       <td>Paciente</td>
      <td>
            <select id="paciente" disabled>
            <?php
                pacientes();
                ?>
            </select>

      </td>
    </tr>
     <tr>
      <td></td>
      <td><input type="submit"  value="Registrar usuario"/><br>
      </td>
    </tr>
</table>

php 函数只是用一些数据库中的数据填充选择选项，没什么大不了的，它们可以工作，没问题。

Answer 1

由于您使用的是 getElementById ，您应该在“select”元素中使用“id”而不是“name”。

<select id="perm_tipo"  onchange="Activar()">
....
</select>

更多重构:您可以在事件监听器中传递 DOM 元素本身，而不必执行 var e = document.getElementById('perm_tipo');首先

<select name="perm_tipo"  onchange="Activar(this)">
 ....
</select>

<script>
  function Activar(e) {
   var strUser = e.options[e.selectedIndex].text;

   if(strUser=="familiar")
     document.getElementById('paciente').disabled = false;
   else
     document.getElementById('paciente').disabled = true;
  }
</script>