回答編集履歴

2

saichousei

2022/09/21 00:56

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -1,17 +1,21 @@
1
1
  ```javascript
2
2
  <script>
3
+ const pet='[name="pet[]"]';
3
- document.addEventListener('change',e=>{
4
+ document.addEventListener('change',({target})=>{
4
- const t=e.target;
5
+ if(target.matches(pet)){
5
- if(t.matches('[name="pet[]"]')){
6
- const l=document.querySelectorAll('[name="pet[]"]:checked').length;
6
+ const l=document.querySelectorAll(`${pet}:checked`).length;
7
7
  document.querySelector('[type=submit]').disabled=l==0;
8
- document.querySelectorAll('[name="pet[]"]:not(:checked)').forEach(x=>{
8
+ document.querySelectorAll(`${pet}:not(:checked)`).forEach(x=>{
9
9
  x.disabled=l>=3;
10
10
  });
11
11
  }
12
12
  });
13
+ window.addEventListener('DOMContentLoaded', ()=>{
14
+ const e = new CustomEvent("HTMLEvents");
15
+ e.initEvent('change', true, true );
16
+ document.querySelector(pet).dispatchEvent(e);
17
+ });
13
18
  </script>
14
-
15
19
  <form class="pet-form">
16
20
  <ul>
17
21
  <li><label><input type="checkbox" name="pet[]" value="dog">Dog</label></li>
@@ -20,7 +24,7 @@
20
24
  <li><label><input type="checkbox" name="pet[]" value=",oose">Moose</label></li>
21
25
  <li><label><input type="checkbox" name="pet[]" value="dragon">Dragon</label></li>
22
26
  </ul>
23
- <button type="submit" disabled>送信</button>
27
+ <button type="submit">送信</button>
24
28
  </form>
25
29
  ```
26
30
  ※調整しました

1

調整

2022/09/21 00:49

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -3,10 +3,10 @@
3
3
  document.addEventListener('change',e=>{
4
4
  const t=e.target;
5
5
  if(t.matches('[name="pet[]"]')){
6
+ const l=document.querySelectorAll('[name="pet[]"]:checked').length;
7
+ document.querySelector('[type=submit]').disabled=l==0;
6
8
  document.querySelectorAll('[name="pet[]"]:not(:checked)').forEach(x=>{
7
- const l=document.querySelectorAll('[name="pet[]"]:checked').length;
8
9
  x.disabled=l>=3;
9
- document.querySelector('[type=submit]').disabled=l==0;
10
10
  });
11
11
  }
12
12
  });
@@ -23,3 +23,4 @@
23
23
  <button type="submit" disabled>送信</button>
24
24
  </form>
25
25
  ```
26
+ ※調整しました