Question

在这段代码中，我们需要在状态（上面的字段）中选择APPROVED时禁用Department字段，并且在选择CLARIFICATIONS时应该激活它，必须启用它。请尝试帮助我们！

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

我们尝试编写一个函数，但它不起作用：（

function doenable() {
    if(document.getElementById("status")!="null") {
        document.getElementById("department").disabled=false;
    }
}

Answer 1

尝试在select字段中设置onchange功能。尝试这样做：

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

和你的javascript函数：

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

如果我是你，我会使用jQuery，比普通的j更容易和更好。

Answer 2

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

JS

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

HTML

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

Answer 3

如果您想要简单的JavaScript解决方案，请尝试以下操作。

<html>

<head>
  <script type='text/javascript'>
    function change(theStatus) {
      if (theStatus.value == "Approved") {
        document.getElementById("dept").disabled = true;
      } else {
        document.getElementById("dept").disabled = false;
      }
    }
  </script>
</head>

<body>
  <select name="status" id="status" onchange="change(this)">
    <option value="">Status</option>
    <option value="Approved">Approved</option>
    <option value="Clarifications">Clarifications</option>
  </select>
  <select name="dept" id="dept">
    <option value=""></option>
    <option value="Admin">Admin</option>
    <option value="Accounts">Accounts</option>
    <option value="Other">Other</option>
  </select>
</body>

</html>

选择后禁用字段

3 个答案: