teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2017/01/26 00:50

投稿

yambejp
yambejp

スコア117885

answer CHANGED
@@ -14,4 +14,32 @@
14
14
  <input type="checkbox" name="name3" id="check3"><label for="check3">同意します-3</label>
15
15
 
16
16
  <button type="submit" id="btn">すべて同意して送信</button>
17
+ ```
18
+
19
+ # 追記
20
+
21
+ classの処理もありましたね、ではこうで
22
+ ```
23
+ <style>
24
+ .inactive{
25
+ background-Color:red;
26
+ }
27
+ </style>
28
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
29
+ <script>
30
+ $(function(){
31
+ $("#check1,#check2,#check3").on('change',function(){
32
+ var flg=$("#check1,#check2,#check3").filter(':checked').length<3;
33
+ $("#btn")
34
+ .prop('disabled',flg)
35
+ .toggleClass('inactive',flg);
36
+ }).change();
37
+ });
38
+ </script>
39
+
40
+ <input type="checkbox" name="name1" id="check1"><label for="check1">同意します-1</label>
41
+ <input type="checkbox" name="name2" id="check2"><label for="check2">同意します-2</label>
42
+ <input type="checkbox" name="name3" id="check3"><label for="check3">同意します-3</label>
43
+
44
+ <button type="submit" id="btn">すべて同意して送信</button>
17
45
  ```