回答編集履歴
2
できない原因も書いた方が良いと思ったので追記。
answer
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
> 反映されませんでした。
|
|
2
|
+
|
|
3
|
+
原因と思われるもの。
|
|
4
|
+
```
|
|
5
|
+
document.getElementsByName('submit_btn').style.color="black";
|
|
6
|
+
//getElementsByNameはElementListなので既にご自身でほかでやってるようにdocument.getElementsByName('submit_btn')[0]ってする必要があると思います。
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
ただ、コードがかなり冗長に思いました。
|
|
10
|
+
cssでstyle先に準備しておけばコード自体は簡潔に書けそうです。
|
|
11
|
+
|
|
1
12
|
最初から考えた方が早そうな気がしたので、ざっくり作り直してみました。
|
|
2
13
|
一応、シンプルには書いたつもりです。
|
|
3
14
|
|
1
修正
answer
CHANGED
|
@@ -1,30 +1,33 @@
|
|
|
1
1
|
最初から考えた方が早そうな気がしたので、ざっくり作り直してみました。
|
|
2
2
|
一応、シンプルには書いたつもりです。
|
|
3
|
-
「ラベルの文字が未：白 済：黒」
|
|
4
3
|
|
|
4
|
+
ラベルの色だけ変えてもボタンは押せるので、属性の付け替えで対応します。
|
|
5
|
+
|
|
5
6
|
```html
|
|
7
|
+
<!--「利用規約に同意する」チェックボックス -->
|
|
6
8
|
<label for="agreement">
|
|
7
9
|
<input type="checkbox" name="agreement" id="agreement" value="1" class="checkbtn">
|
|
8
10
|
利用規約に同意します
|
|
9
11
|
</label>
|
|
12
|
+
|
|
13
|
+
<!--送信ボタン -->
|
|
10
|
-
<input type="submit" name="submit_btn" class="submit" id="submit" value="送信" disabled><
|
|
14
|
+
<p class="buttons"><input type="submit" name="submit_btn" class="submit" id="submit" value="送信" disabled></p>
|
|
11
15
|
```
|
|
12
16
|
```css
|
|
13
|
-
|
|
17
|
+
#submit{
|
|
18
|
+
color:#000;
|
|
19
|
+
}
|
|
20
|
+
#submit:disabled{
|
|
14
21
|
color:#fff;
|
|
15
22
|
}
|
|
16
|
-
label.checked{
|
|
17
|
-
color:#000;
|
|
18
|
-
}
|
|
19
23
|
```
|
|
20
24
|
```js
|
|
21
25
|
window.addEventListener('DOMContentLoaded', () => {
|
|
22
26
|
document.querySelector('#agreement').addEventListener('click', evt => {
|
|
23
|
-
evt.currentTarget.parentNode.classList.remove('checked');
|
|
24
|
-
document.querySelector('#submit')
|
|
27
|
+
let submit_button = document.querySelector('#submit');
|
|
28
|
+
submit_button.disabled = true;
|
|
25
29
|
if (evt.currentTarget.checked) {
|
|
26
|
-
evt.currentTarget.parentNode.classList.add('checked');
|
|
27
|
-
|
|
30
|
+
submit_button.disabled = false;
|
|
28
31
|
}
|
|
29
32
|
});
|
|
30
33
|
});
|