回答編集履歴
2
saichousei
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
|
-
|
5
|
+
if(target.matches(pet)){
|
5
|
-
if(t.matches('[name="pet[]"]')){
|
6
|
-
const l=document.querySelectorAll(
|
6
|
+
const l=document.querySelectorAll(`${pet}:checked`).length;
|
7
7
|
document.querySelector('[type=submit]').disabled=l==0;
|
8
|
-
document.querySelectorAll(
|
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"
|
27
|
+
<button type="submit">送信</button>
|
24
28
|
</form>
|
25
29
|
```
|
26
30
|
※調整しました
|
1
調整
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
|
+
※調整しました
|