回答編集履歴

3

1つでも1以上、に対応

2021/11/07 03:52

投稿

int32_t
int32_t

スコア21712

test CHANGED
@@ -1,28 +1,26 @@
1
- あ、「1つでも1以上」ですね。誤解してました。以下はダメです。
2
-
3
-
4
-
5
- ~~`min="0"` を `min="1"` に変えて、バブリングする `change` イベントを `<form>` で聞いて、validity 判定すればよのではないでょうか~~
1
+ バブリングする `change` イベントを `<form>` で聞いて、そこで判定するとやりやす気がます
6
-
7
-
8
2
 
9
3
  ```js
10
4
 
11
5
  document.querySelector('form').addEventListener('change', e => {
12
6
 
13
- if (e.target.checkValidity()) {
7
+ for (let count of e.target.querySelectorAll('.count')) {
14
8
 
15
- // 送信してもいいときの処理
9
+ if (count.valueAsNumber >= 1) {
16
10
 
17
- e.target.querySelector('[type=submit]').disabled = ...
11
+ // is-show を足す?
18
12
 
19
- } else {
13
+ e.target.querySelector('[type=submit]').classList.....
20
14
 
21
- // 送信して欲しくないときの処理
15
+ return;
22
16
 
23
- e.target.querySelector('[type=submit]').disabled = ...
17
+ }
24
18
 
25
19
  }
20
+
21
+ // 1以上の値から0に戻すこともできるので、is-show を消す必要がありそう?
22
+
23
+ e.target.querySelector('[type=submit]').classList.....
26
24
 
27
25
  });
28
26
 

2

とりけし

2021/11/07 03:52

投稿

int32_t
int32_t

スコア21712

test CHANGED
@@ -1,4 +1,8 @@
1
+ あ、「1つでも1以上」ですね。誤解してました。以下はダメです。
2
+
3
+
4
+
1
- `min="0"` を `min="1"` に変えて、バブリングする `change` イベントを `<form>` で聞いて、validity 判定すればよいのではないでしょうか。
5
+ ~~`min="0"` を `min="1"` に変えて、バブリングする `change` イベントを `<form>` で聞いて、validity 判定すればよいのではないでしょうか。~~
2
6
 
3
7
 
4
8
 

1

nits

2021/11/07 03:47

投稿

int32_t
int32_t

スコア21712

test CHANGED
@@ -10,13 +10,13 @@
10
10
 
11
11
  // 送信してもいいときの処理
12
12
 
13
- // e.target.querySelector('[type=submit]').clasList.remove(...
13
+ e.target.querySelector('[type=submit]').disabled = ...
14
14
 
15
15
  } else {
16
16
 
17
17
  // 送信して欲しくないときの処理
18
18
 
19
- // e.target.querySelector('[type=submit]').clasList.add(...
19
+ e.target.querySelector('[type=submit]').disabled = ...
20
20
 
21
21
  }
22
22