如何根据下拉列表选项禁用对应输入文本框？

针对你的表单需求，先修正原代码里的语法错误和逻辑漏洞，以下是完整的可运行实现：

修正后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
  <form method="post" action="">
    <label>Sub Department :</label>
    <select id="type">
      <option value="ward">Ward</option>
      <option value="room">Room</option>
    </select>
    
    <label> Ward No: <input type="text" name="abc" id="abc" class="ward-fields"></label>
    <label> Ward Name: <input type="text" name="abc1" id="abc1" class="ward-fields"></label>
    
    <label> Room No: <input type="text" name="roomno" id="roomno" class="room-fields"></label>
    <label> Room Name: <input type="text" name="roomname" id="roomname" class="room-fields"></label>
  </form>
</body>
</html>

修正后的JavaScript代码 #

$("#type").change(function() {
  const selectedVal = $(this).val();
  // 选择Ward时，禁用Room字段，启用Ward字段
  if (selectedVal === "ward") {
    $(".room-fields").prop("disabled", true);
    $(".ward-fields").prop("disabled", false);
  } else {
    // 选择Room时，禁用Ward字段，启用Room字段
    $(".ward-fields").prop("disabled", true);
    $(".room-fields").prop("disabled", false);
  }
}).trigger("change"); // 页面加载时触发一次，设置初始状态

关键说明 #

• HTML修正点：补全了属性的等号与引号，闭合了<label>标签，修正了roomnam的拼写错误，给对应输入框添加了统一类名（ward-fields/room-fields），方便批量操作。
• JS修正点：
  • 用ID选择器#type定位下拉框，比全局select更精准，避免冲突；
  • 字符串比较时给ward加上引号，修正语法错误；
  • 使用.prop("disabled", true/false)替代.attr，处理布尔属性更可靠；
  • 切换选项时同时启用另一组输入框，修复原代码只禁用不启用的逻辑漏洞；
  • 保留trigger("change")确保页面加载时就应用初始禁用状态。

内容的提问来源于stack exchange，提问作者Moon