Html 选择后禁用字段

在这段代码中，我们需要在状态（上述字段）中选择“批准”时禁用“部门”字段，并且在选择“澄清”时应处于活动状态。必须启用该字段。请尝试帮助我们

<form name="index" action="Director">
    <table border="0"  style="width:300px">
        <tbody bgcolor>
            <p> Date: <%= df.format(new java.util.Date()) %> </p>
            <tr>
                <td height="40"><font color="Blue">Branch:</td>
                <td>

                    <select name="dbranch" id="dbranch" >
                        <option value="Select">Select</option>
                        <option value="Kakinada">Kakinada</option>
                        <option value="Vishakapatnam">Vishakapatnam</option>
                        <option value="Tirupathi">Tirupathi</option>
                        <option value="Vijayawada">Vijayawada</option>
                        <option value="Warangal">Warangal</option>
                        <option value="Hyderabad">Hyderabad</option>
                    </select>
                </td>
            </tr>                                
            <tr>
                <td height="40"><font color="Blue">Doc id :</td>
                <td>
                <select id="inw_id" name="inw_id">
                <option value='0'>Select Doc ID</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Status:   </td>
                <td>
                    <select name="status" id="status" >
                        <option value="">Status</option>
                        <option value="Approved">Approved</option>
                        <option value="Clarifications">Clarifications</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Department:   </td>
                <td>
                    <select name="dept" id="dept" >
                        <option value=""> </option>
                        <option value="Admin">Admin</option>
                        <option value="Accounts">Accounts</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <tr><td><td align="right"><input name="submit" type="submit" value="Submit"style="background-color:LightBlue;margin-left:15px;height: 40px;width: 100px; margin-right: -30px;"></td></td></tr>
</form>

---

尝试在选择字段中设置onchange函数。 尝试这样做：

<select name="status" id="status" onchange="doenable()" >
  <option value="">Status</option>
  <option value="Approved">Approved</option>
  <option value="Clarifications">Clarifications</option>
</select>

如果我是你，我会使用jQuery，它比普通的js更简单、更好。

我重写了你的代码。 在这里，我工作了。尝试这样做：

JS

$（）.ready（函数（）{
$（'dept'）prop（'disabled'，true）；
});
功能可启用（部门值）{
警报（部门值）；
如果（部门值=“”）{
$（'dept'）prop（'disabled'，true）；
}否则{
$（'dept'）prop（'disabled'，false）；
}
}

HTML

分支机构：
挑选
卡基纳达
维沙卡帕特南
提鲁帕蒂
维贾亚瓦达
瓦兰加尔
海得拉巴
文档id:
选择文档ID
地位：
地位
经核准的
澄清
部门：
管理
账户
其他

如果您想要纯javascript解决方案，请尝试以下方法

功能改变（状态）{
如果（status.value==“已批准”）{
document.getElementById（“dept”）.disabled=true；
}否则{
document.getElementById（“部门”）.disabled=false；
}
}
地位
经核准的
澄清
管理
账户
其他

如果可能的话，为它创建一个JSFIDLE文件。在哪里调用

doenable（）

函数？！嗨，普拉迪普，我发布了另一个答案。使用jQuery.=）我也会接受的！你能在Jquery中帮我一下吗！：）但上述解决方案有效吗？jQuery是一种不同的方法。你会写更少的代码。嗨，普拉迪普，我发布了另一个答案。使用jQuery.=）

<select name="status" id="status" onchange="doenable()" >
  <option value="">Status</option>
  <option value="Approved">Approved</option>
  <option value="Clarifications">Clarifications</option>
</select>

function doenable() {
  if(document.getElementById("status").value != "" {
    document.getElementById("department").enabled = false;
  } else {
    document.getElementById("department").enabled = true;
  }
}

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $().ready(function(){                
      $('#dept').prop('disabled', true);
    });

    function doenable(dept_value) {
      alert(dept_value);
      if(dept_value == '') {
        $('#dept').prop('disabled', true);
      } else {
        $('#dept').prop('disabled', false);
      }
    }
  </script>

<form name="index" action="Director">
    <table border="0"  style="width:300px">
        <tbody bgcolor>

            <tr>
                <td height="40"><font color="Blue">Branch:</td>
                <td>

                    <select name="dbranch" id="dbranch" >
                        <option value="Select">Select</option>
                        <option value="Kakinada">Kakinada</option>
                        <option value="Vishakapatnam">Vishakapatnam</option>
                        <option value="Tirupathi">Tirupathi</option>
                        <option value="Vijayawada">Vijayawada</option>
                        <option value="Warangal">Warangal</option>
                        <option value="Hyderabad">Hyderabad</option>
                    </select>
                </td>
            </tr>                                
            <tr>
                <td height="40"><font color="Blue">Doc id :</td>
                <td>
                <select id="inw_id" name="inw_id">
                <option value='0'>Select Doc ID</option>
                </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Status:   </td>
                <td>
                    <select name="status" id="status" onchange="doenable(this.value)">
                        <option value="">Status</option>
                        <option value="Approved">Approved</option>
                        <option value="Clarifications">Clarifications</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td height="40"><font color="Blue">Department:   </td>
                <td>
                    <select name="dept" id="dept" >
                        <option value=""> </option>
                        <option value="Admin">Admin</option>
                        <option value="Accounts">Accounts</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <tr><td><td align="right"><input name="submit" type="submit" value="Submit"style="background-color:LightBlue;margin-left:15px;height: 40px;width: 100px; margin-right: -30px;"></td></td></tr>
</form>