JavaScript を使用して入力ボタンを有効/無効にする
このチュートリアルでは、JavaScript / JQuery を使用して HTML 入力ボタンを有効/無効にする方法を説明します。
フォームを送信する前後など、HTML ボタンを有効/無効にしたい状況に遭遇することがよくあります。これを行う最良の方法は、JavaScript DOM 操作を使用してボタンを選択し、その無効ステータスを true/false に変更して、オン/オフ状態を切り替えることです。以下に、ボタンを無効/有効にする 2つの方法を示します。1つは JavaScript を使用し、もう 1つは 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;
}
}
ここでは、最初に入力とボタンへの参照を 2つの変数に格納してから、ボタンのデフォルト状態を無効に設定します。イベントリスナーを追加して、テキストボックス内に入力アクティビティがあるかどうかを確認し、関数 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 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