【JavaScript】チェックボックスにチェックが付いたらボタンを押せる仕組みを作る
こんばんは！今日も雨で毎日ジメジメしてますね。
さて、今日はチェックボックスにチェックをいれたらボタンを押せる仕組みを作りたいと思います。
よく問い合わせの送信フォームにあるやつですね＼(^o^)／
まずはHTMLを用意しましょう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<style></style>
</head>
<body>
<input type="checkbox" />
<button disabled>click</button>
</body>
</html>
ここではinputとbuttonタグを作りbutton要素にはdisabled属性をつけることでclickできないようにします。
続いて本題のJavaScriptです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<style></style>
</head>
<body>
<input type="checkbox" />
<button disabled>click</button>
<script>
let input = document.querySelector("input");
let button = document.querySelector("button");
input.addEventListener("change", () => {
if (input.checked == true) {
button.disabled = false;
} else {
button.disabled = true;
}
});
</script>
</body>
</html>
ここで何をしているかという解説です・
let input = document.querySelector("input");
let button = document.querySelector("button");
まずは各要素を取得します。今回はIDやclassを振らずに直接要素を取得します。
input.addEventListener("change", () => {
if (input.checked == true) {
button.disabled = false;
} else {
button.disabled = true;
}
});
続いてinput要素にイベントを設定します。ここではinput要素にcheckがあったときに発火させたいので"change"イベントを使用します。addEventListenerを使ってイベントを設置したあとif文で条件分岐をします。inputにチェックが入っているかいないかを判定しtrueだった場合、ボタンのdisabled属性が外れます。elseではその他という意味なのでinputにチェックが入っていればボタンを押せるようにします。
これで完成です。チェックが入ったら押せるかどうか確認してみてください(^^)
最後にif文の記述は下記記述でも対応できます。
button.disabled = !input.checked;
inputにチェックが入っていないときはボタンを押せなくするという記述です。!は〇〇じゃないときを意味します。すっきりとした記述ですね。
今後も基礎的なJavaScriptの解説をしていきますのでよろしければ見ていってくださいね!良い週末をお過ごしください(^^)
ブログ始めました！
— フロントエンドブログ(よーさん) (@frontend_blog23) 2021年8月30日
よろしければ見ていってください！https://t.co/5oZys8GAIq#フロントエンジニア #WEB制作#WordPress
