Javascript 条件をつけてボタンを押せなくする

例えば
商品追加のカート上で
”ー”と”＋”ボタンがあり、
数量が0の時”ー”ボタンを押せなくさせたい場合は
どのようなコードを書けばいいでしょうか？？

Disableを使うべき？？

サンプルコード等アドバイスいただければ嬉しいです。

よろしくお願いいたします。

退会済みユーザー

2021/01/13 15:23

HTMLなりJSなりでDisableを使うことが分かっているなら、一度ご自身でコードを書いてそのコードと共に、想定した動き、実際の挙動やエラーメッセージ等を掲載した方が回答が得られると思います。流石に丸投げすぎます…。

Brisk

2021/01/13 16:18

おっしゃる通りです。。丸投げしすぎですね。次回からはコード記載します！お忙しいところ、ありがとうございます！

行動規範の内容に同意します

回答3件

実は裏でコードを書いていたんで貼っておきます。
https://jsfiddle.net/mahny/Lf1ep52j/

投稿2021/01/13 20:42

退会済みユーザー

総合スコア0

Brisk

2021/01/13 21:35

!!!! ありがとうございます！！かなり参考になるコードです！実装してみます！ちなみに、Terarailの使い方（質問形式やNGなど）も色々と参照し、概ね理解しました！またお世話になるかもしれませんので、今後ともよろしくお願いいたします！

行動規範の内容に同意します

disabledにするのも手ですが、最低限で言うなら0の場合に「何もしない」だけで目的は達成できますよね。

disabledにすると押せないだけでなく、見た目も非活性になるので、それがあなたのやりたい事に含まれるならdisabledにすればいいですが、その場合は「0以上の場合に活性化させる」処理を忘れないようにしましょう。

html
1<input type="text" id="box" readonly value="5">
2<button id="minus"> - </button><button id="plus"> + </button>
3

javascript
1document.getElementById("minus").addEventListener('click', e => {
2    var box = document.getElementById("box");
3    if (box.value > 0) { // ゼロ以上の場合だけ引く
4        box.value = parseInt(box.value) - 1;
5    }
6    e.target.disabled = (box.value <= 0); // 活性非活性
7});
8document.getElementById("plus").addEventListener('click', e => {
9    var box = document.getElementById("box");
10    box.value = parseInt(box.value) + 1;
11    document.getElementById("minus").disabled = (box.value <= 0);
12});
13

投稿2021/01/13 15:57

umau

総合スコア831

Brisk

2021/01/13 16:23

ありがとうございます！当方かなりの初心者のため、色々なコードをご教授いただき、助かります。

行動規範の内容に同意します

ベストアンサー

disable 属性もそうですが、JavaScriptでの入力制限は抜け道が多いのでその値を保証するわけではないので、サーバ側での検証は必須、というご理解を前提としていただいた上で、以下のようなコードはいかがでしょうか。

html
1<input id="num" type="number" min="0" max="5" value="0">
2<button id="add">
3  add
4</button>
5<button id="sub">
6  sub
7</button>

js
1document.getElementById('add').addEventListener('click', e => document.getElementById('num').stepUp() );
2document.getElementById('sub').addEventListener('click', e => document.getElementById('num').stepDown() );