資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery 啟用/停用按鈕？
除了事件處理、CSS 動畫和 Ajax 之外，jQuery 還是一個輕量級的 JavaScript 框架，旨在簡化 HTML DOM 樹的遍歷和操作。它以遵循“少寫多做”的格言而聞名。開發人員使用 jQuery 的各種工具和功能來修改 HTML 檔案、處理 AJAX 呼叫、管理事件和建立動畫。
我們將使用 prop() 函式和 attr() 函式在 JQuery 中啟用或停用按鈕。
方法 -1：滿足條件時啟用按鈕
在此示例中，我們將瞭解如何在選中單選框時啟用按鈕。
演算法
步驟 1：透過 script 標籤匯入 jQuery 指令碼。
步驟 2：定義單選框和 val() 函式以獲取單選框的狀態。
步驟 3：將一個函式傳遞給 on() 函式以檢查單選按鈕的當前狀態。
步驟 4：使用 prop() 函式更改按鈕的狀態。
語法
$('#myButton').prop('disabled', false);
在以下示例中，prop 函式用於設定 id 為 'myButton' 的按鈕的 disabled 屬性值，在本例中為 false。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable/ Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Select Option 1 to enable the button</h3>
<div>
<input type="radio" name="Option" value="Option 1" id="option1">Option 1 </input>
<input type="radio" name="Option" value="Option 2" id="option2">Option 2 </input>
<input type="radio" name="Option" value="Option 3" id="option3">Option 3 </input>
</div>
<button type="button" id="myButton" disabled>Toggle Button</button>
<script>
$("input[type='radio']").on("click", function(){
if($("#option1").is(':checked')){
$("#myButton").prop("disabled", false);
}else{
$("#myButton").prop("disabled", true);
}
});
</script>
<style>
body{
background-color: #8a2be2;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
}
h3{
background-color: cadetblue;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
div{
margin-top: 20px;
margin-bottom: 50px;
padding-left: 30px;
}
#myButton{
/* margin-left: 5%; */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 75px;
padding-right: 75px;
border-radius: 15px;
margin-left: 30px;
}
</style>
</body>
</html>
在此示例中，我們檢查對單選按鈕輸入的每次點選。如果選中 option1 單選按鈕（在 if 條件中透過 .is(“:checked”) 進行檢查），則使用 prop() 函式刪除 disabled 屬性，否則停用按鈕。
方法 2：滿足輸入條件時解鎖按鈕。
在此方法中，我們將瞭解如何在輸入文字欄位不為空時啟用按鈕。
語法
$('#myButton').attr('disabled', true);
在此程式碼段中，attr 函式用於設定 id 為 'myButton' 的按鈕的 disabled 屬性值，在本例中為 true。
演算法
步驟 1：透過 script 標籤匯入 jQuery 指令碼。
步驟 2：使用 input 標籤定義文字輸入元件。
步驟 3：檢查輸入欄位是否為空。
步驟 4：如果輸入欄位不為空，則啟用按鈕，否則保持停用狀態。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable/ Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Enter something to enable the button</h3>
<div>
<input type="text" name="username" id="username" />
</div>
<button type="button" id="myButton" disabled>Toggle Button</button>
<script>
$("input[type='text']").keyup(function(){
if($("#username").val() !== ""){
$("#myButton").attr("disabled", false);
}else{
$("#myButton").attr("disabled", true);
}
});
</script>
<style>
body{
background-color:chocolate;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
}
h3{
background-color:burlywood;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
div{
margin-top: 20px;
margin-bottom: 50px;
padding-left: 30px;
}
input[type='text']{
padding-top: 20px;
padding-bottom: 20px;
width: 330px;
padding-left: 20px;
font-size: xx-large;
}
#myButton{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 140px;
padding-right: 140px;
border-radius: 15px;
margin-left: 30px;
}
</style>
</body>
</html>
在此程式碼中，我們瞭解瞭如何使用 attr() 函式啟用按鈕。首先，我們使用 val() 函式檢查文字輸入是否為空，該函式返回文字輸入欄位的當前值。如果為空，則將 disabled 屬性保持為 true，反之亦然。
結論
jQuery 提供了一種快速有效的方法來啟用或停用網頁上的按鈕，具體取決於使用者輸入和其他因素。透過使用 prop() 和 attr() 函式更改按鈕元素的 disabled 屬性，除非滿足必要的條件，否則使用者無法單擊按鈕。這可以透過減少錯誤和提供即時反饋來增強使用者體驗。
此外，jQuery 還提供各種其他功能和特性，可用於增強網頁的響應能力和互動性。這些功能從管理表單提交和 AJAX 查詢到生成動畫和效果。透過掌握 jQuery 的基礎知識並探索其功能，您可以開啟一個建立引人入勝和動態網頁的世界，從而帶來愉悅的使用者體驗。
3K+ 閱讀量
