質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2242閲覧

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

Brisk

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/13 14:03

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

Disableを使うべき??

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/01/13 15:23

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

2021/01/13 16:18

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

回答3

0

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

投稿2021/01/13 20:42

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Brisk

2021/01/13 21:35

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

0

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

総合スコア805

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Brisk

2021/01/13 16:23

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

0

ベストアンサー

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() );

参考:

The method will not cause the value to go below the min value set or defy the constraints set by the step attribute.

HTMLInputElement.stepDown() - Web APIs | MDN

投稿2021/01/13 15:23

編集2021/01/13 15:26
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Brisk

2021/01/13 16:24

ありがとうございます! 無事解決できそうです。 大変アバウトな質問にもかかわらず、 ご回答いただきありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問