使用 JavaScript 啟用/禁用輸入按鈕
Harshit Jindal
2023年10月12日
本教程講授如何使用 JavaScript/JQuery 啟用/禁用 HTML 輸入按鈕。
我們經常遇到想要啟用/禁用 HTML 按鈕的情況，例如在提交表單之前和之後。最好的方法是使用 JavaScript DOM 操作來選擇按鈕，並將其 disabled 狀態更改為 true/false，以切換其 on/off 狀態。在下面，我們將看到兩種禁用/啟用按鈕的方法，一種使用 JavaScript，另一種使用 JQuery。
使用 JavaScript 啟用/禁用輸入按鈕
下面是一個按鈕的演示，當在框中輸入文字時，按鈕會被啟用，否則會被禁用。
HTML 程式碼
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
JavaScript 程式碼
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
在這裡，我們首先將對輸入和按鈕的引用儲存在兩個變數中，然後將按鈕的預設狀態設定為禁用。我們新增了一個事件偵聽器，以檢視文字框內是否有任何輸入活動，然後使用 stateHandle() 函式相應地禁用/啟用提交按鈕。
使用 jQuery 啟用/禁用輸入按鈕
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
我們使用 ready() 函式使其在文件載入完畢後可用。然後，.on() 方法將事件處理程式附加到輸入欄位。change 事件將檢查輸入欄位中的更改並相應地執行該函式。然後，.prop() 方法將更改按鈕的狀態。
作者： Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn