inputのnumber=０の場合は、送信ボタンが押せないように制御する方法

Question

以下のコードは、
ユーザーがそれぞれ必要な個数を入力して、
submitボタンをクリックします。

実装したいことは、いずれのnumber要素が1つでも
「1以上」になれば、submitボタンをクリックできることです。
「0」ならクリック不可にします。

javascriptで制御するのがベターと考え、
javascriptコードを書きました。
①と②の処理が分からないのと、
全体的に合っているのか、
ヒントやアドバイス頂ければ幸いです。
どうぞよろしくお願い致します。

<form>
<input class="count" type="number" name="0" value="0" min="0" max="99" required>
<input class="count" type="number" name="1" value="0" min="0" max="99" required>
<input class="count" type="number" name="2" value="0" min="0" max="99" required>
<input type="submit" value="注文を最終確認する">
</form>

$('.count').on('change', function () {
//①input type=submitにclass(.is-show)があるならリムーブする初期化処理
const count = document.getElementsByClassName('count')
for (let i = 0; i < count.length; i++) {
if (count.item(0).value !== "0") {
//②input type=submitにclass(.is-show)を付与する処理
}
}

Comments

[m.ts10806]

分からないなりに書いてみては。

[退会済みユーザー]

ありがとうございます。
まったく分かりません。

[m.ts10806]

１行も書けないならもはや単なる作業依頼です。諦めてください。
何か調べて試してるなら現在できてるところまででも提示してください。

[退会済みユーザー]

分かりました。

[m.ts10806]

２点書いてますが、どちらに「分かりました」なのでしょうか。

[退会済みユーザー]

＞何か調べて試してるなら現在できてるところまででも提示してください。
こちらです。

[pinkpink]

アホ、やめろ。プログラミング向いてない。

[退会済みユーザー]

pinkpinkさん、
コメントありがとうございます。

[pinkpink]

追記みたけどやっぱりアホだな。。。

[m.ts10806]

なぜリムーブする必要があるのでしょうか。編集前後で大きく中身が変わっていて話の整合性が取れなくなってると思います。

[退会済みユーザー]

＞なぜリムーブする必要があるのでしょうか。
仮に、あるnumberの要素を1にしたとします。
このとき、submitボタンにクラスが付与されます。

そして、そのnumberの要素を0にもどしたとします。
このときに、submitボタンに付与されたクラスを取りたいからです。

＞編集前後で大きく中身が変わっていて話の整合性が取れなくなってると思います。
私もそう思います。
いまJavascriptでコードを書いているので、
それが一通り終えた後に必要なら、改めて、質問し直そうと思います。

Answer 1

jQueryを使うとこんな感じ。

$(function(){
	$('input[type="submit"]').attr('disabled',true);
	$(document).on('change blur','form',function(){
		let disabled_flg = true;
		$('input[type="number"].count').each(function(index,element){
			if(parseInt($(element).val()) > 0){
				disabled_flg = false;
				return;
			}
		})
		$('input[type="submit"]').attr('disabled',disabled_flg);
	});
});

int32_tさんの回答通り、イベント監視するならformのほうが良いと思います。

いずれにしてもセレクタの参照の仕方は覚えておいた方が良いと思います。
考え方そのままCSSにも使えます。

Comments

[m.ts10806]

.is-show云々したいのなら
イベント冒頭でremoveClass()しておいて、disabled_flg ==trueのときにのみ.addClass()
に変更。

[退会済みユーザー]

jQueryのコードありがとうございます。
まだ全てを理解できていませんが、
セレクタの参照の仕方を含め
勉強する事項が分かりました。

また明日以降に
コードを眺めてリサーチしています。

Answer 2

バブリングする change イベントを <form> で聞いて、そこで判定するとやりやすい気がします。

document.querySelector('form').addEventListener('change', e => {
  for (let count of e.target.querySelectorAll('.count')) {
    if (count.valueAsNumber >= 1) {
      // is-show を足す?
      e.target.querySelector('[type=submit]').classList.....
      return;
    }
  }
  // 1以上の値から0に戻すこともできるので、is-show を消す必要がありそう?
  e.target.querySelector('[type=submit]').classList.....
});

Comments

[退会済みユーザー]

分かりづらい質問にも関わらず、
ご回答いただきありがとうございました。

参考にさせていただきましたが、
自分のローテクのようなコードにて実現できました。

教えて頂いた内容は、
私が初心者のため、全部は上手く咀嚼できていませんが
これからよく調べます。

本当にありがとうございました。

Answer 3

以下のコードで実現できました。

考え方は、
submitボタンをデフォルトでdisabledにしておき、
type=numberがクリックされたら、
すべての値を確認して、1以上なら、disabledをリムーブします。

もっとスマートなコードがあるはずですが、
ひとまず今の自分にできる範囲で解決とさせていただきます。

ご回答くださった方々、pinkpinkさんも含め、
ありがとうございました。

function countClick(){
var example = document.getElementById('example');
example.setAttribute("disabled", true);
const count = document.getElementsByClassName('count')
for (let i = 0; i < count.length; i++) {
if (count.item(i).value >= 1) {
example.removeAttribute("disabled");
}
}
}

Comments

[m.ts10806]

jQuery使うなら全部jQueryにしたほうが良いですよ。

[退会済みユーザー]

アドバイスありがとうございます。
お陰様で気が付きました。
見直して全部、queryで書き直せるようにいたします。

[m.ts10806]

ざっと作ったのを回答にしておきます。

[退会済みユーザー]

ありがとうございます。
拝見します。