JavaScript 禁用按鈕單擊
Anika Tabassum Era
2023年1月30日
2022年6月15日
在 JavaScript 中，disabled 屬性僅適用於以 type="submit" 為根的按鈕。否則，它不會像一個提交按鈕那樣起作用；相反，它將接受多個提交。
類似地，jQuery 屬性 disabled 適用於具有 submit 型別的按鈕。另外，表單提交方法在這方面非常重要。
在我們的示例集中，我們將看到 JavaScript disabled 屬性和 jQuery disabled 屬性的實現。
使用 JavaScript disabled 屬性禁用按鈕單擊
通常，我們定義一個表單及其方法來確保提交的目的。無論如何，JavaScript 的屬性 disabled 讓我們可以讓按鈕處於非活動狀態。
在這裡，我們將啟動一個表示 submit 型別的 input 欄位。稍後獲取 input 標籤的例項，我們將觸發 disabled 屬性。
程式碼片段：
<body>
<p>Click the button to submit data!</p>
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save();'>
</p>
<p id="msg"></p>
</body>
<script>
function save() {
var dis = document.getElementById('btClickMe').disabled = true;
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
輸出：
使用 jQuery disabled 屬性禁用按鈕單擊
在 jQuery 中，我們將有一個類似的 disabled 屬性用例。這裡的區別是我們將在 form 標籤內啟動 input 欄位（submit 型別按鈕）。
我們將確保這是否也適用於表單。
程式碼片段：
<body>
<form id="fABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
$(document).ready(function () {
$("#fABC").submit(function (e) {
e.preventDefault();
$("#btnSubmit").attr("disabled", true);
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
輸出：
禁用按鈕的 jQuery 方法類似於 JavaScript。在示例中，我們新增了一個帶有 type=button 的通用按鈕，該按鈕無法由 disabled 屬性或屬性處理。
這就是 JavaScript 或 jQuery disabled 屬性如何使提交按鈕處於非活動狀態。
Author: Anika Tabassum Era
