首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

jQuery 文本框為空時禁用二級聯動下拉框

     編輯:程式設計疑難解答

需求

文本框 `#test` 為空時,下拉框 `#sel1`、`#sel2` 禁用;輸入內容後啟用。

完整示例

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
    $("#test").on("input", function() {
        var empty = $.trim(this.value) === "";
        $("#sel1, #sel2").prop("disabled", empty);
    }).trigger("input"); // 初始化觸發一次
});
</script>
</head>
<body>
<p>文本框為空時下拉框禁用</p>
<input id="test" type="text" />
<select id="sel1"><option>1</option><option>2</option></select>
<select id="sel2"><option>A</option><option>B</option></select>
</body>
</html>

關鍵點

  • 使用 `input` 事件實時響應(含中文輸入法)。
  • `.prop("disabled", boolean)` 設置禁用狀態(jQuery 1.6+ 推薦)。
  • `.trigger("input")` 頁面載入時同步初始狀態。
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved