當(dāng)我們使用JavaScript編寫(xiě)網(wǎng)頁(yè)時(shí)，按鈕不可用是非常常見(jiàn)的問(wèn)題。這通常是因?yàn)槲覀冃枰獔?zhí)行某個(gè)操作或者等待一些操作完成后才能激活按鈕。下面我們將通過(guò)幾個(gè)例子，來(lái)了解如何通過(guò)JavaScript實(shí)現(xiàn)按鈕的禁用和啟用。

首先我們來(lái)看一個(gè)最簡(jiǎn)單的例子，假設(shè)我們有一個(gè)表單，要求用戶(hù)必須先輸入用戶(hù)名和密碼才能激活提交按鈕。代碼如下：

<form>
<label>用戶(hù)名:<input type="text" id="username"/></label>
<label>密碼:<input type="password" id="password"/></label>
<button id="submit" disabled>提交</button>
</form>
<script>
var username = document.getElementById("username");
var password = document.getElementById("password");
var submit = document.getElementById("submit");
username.addEventListener("input", function() {
if (username.value && password.value) {
submit.disabled = false;
} else {
submit.disabled = true;
}
});
password.addEventListener("input", function() {
if (username.value && password.value) {
submit.disabled = false;
} else {
submit.disabled = true;
}
});
</script>

在上面的代碼中，我們首先將提交按鈕禁用(disabled)，表示未滿(mǎn)足提交條件。然后在用戶(hù)名和密碼輸入框的輸入事件(input)中，判斷輸入是否符合要求。如果符合，就將提交按鈕的disabled屬性改為false，表示可以提交；否則就改為true，禁用提交按鈕。

接下來(lái)我們?cè)賮?lái)看一個(gè)應(yīng)用場(chǎng)景，假設(shè)我們網(wǎng)頁(yè)中有一個(gè)下載鏈接，用戶(hù)必須在下載前先填寫(xiě)一個(gè)表單并提交，才能激活下載鏈接。我們可以通過(guò)以下代碼實(shí)現(xiàn)：

<form id="form">
<label>姓名:<input type="text" id="name"/></label>
<label>郵箱:<input type="email" id="email"/></label>
<button id="submit" disabled>提交</button>
</form>
<a href="download.zip" download id="download" class="disabled">下載鏈接</a>
<script>
var name = document.getElementById("name");
var email = document.getElementById("email");
var submit = document.getElementById("submit");
var download = document.getElementById("download");
submit.addEventListener("click", function() {
//表單驗(yàn)證通過(guò)后執(zhí)行的操作
download.classList.remove("disabled");
submit.disabled = true;
submit.innerText = "已提交";
});
name.addEventListener("input", function() {
checkForm();
});
email.addEventListener("input", function() {
checkForm();
});
function checkForm() {
if (name.value && email.value) {
submit.disabled = false;
} else {
submit.disabled = true;
}
}
</script>
<style>
.disabled {
opacity: 0.5;
pointer-events: none;
}
</style>

在上面的代碼中，我們將下載鏈接加上class"disabled"，并通過(guò)CSS將其禁用。表單提交按鈕同樣設(shè)為disabled。然后在表單提交按鈕的點(diǎn)擊事件中，我們執(zhí)行表單驗(yàn)證通過(guò)后的操作——將下載鏈接的class中的disabled移除，同時(shí)禁用表單提交按鈕。并將表單提交按鈕文本改為"已提交"。在用戶(hù)名和郵箱輸入框的輸入事件中，我們同樣調(diào)用checkForm()函數(shù)進(jìn)行表單驗(yàn)證，驗(yàn)證通過(guò)后就激活表單提交按鈕。

總結(jié)來(lái)說(shuō)，通過(guò)這幾個(gè)例子我們可以看出，禁用和啟用按鈕的關(guān)鍵操作都是通過(guò)JavaScript中的disabled屬性進(jìn)行控制。我們可以通過(guò)各種條件判斷，來(lái)判斷何時(shí)禁用按鈕，何時(shí)激活按鈕。這種控制為我們的網(wǎng)頁(yè)交互提供了很好的體驗(yàn)保證。