JavaScript ボタンのクリックを無効にする
Anika Tabassum Era
2023年1月30日
JavaScript
JavaScript Button
JavaScript では、disabled プロパティは、type="submit"としてルート化されたボタンに対してのみ正常に機能します。そうしないと、1つの送信ボタンのように機能しません。むしろ、複数の提出を受け入れます。
同様に、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 プロパティが送信ボタンを非アクティブにする方法です。
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
