teratail
回答率
85.48%
質問するログイン新規登録
トップjQueryに関する質問jQueryで複数のチェックボックスのうち1つでもチェックしていたら送信ボタンを有効化する方法を教えてください。

編集履歴

回答編集履歴

4

修正

2017/01/08 01:45

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
  $(document).ready(function () {
64
64
 
65
- $("#send").attr("disabled", true);//ページが読み込み終わったら実行。
65
+ $("#send").prop("disabled", true);//ページが読み込み終わったら実行。
66
66
 
67
67
  });
68
68
 
@@ -70,9 +70,9 @@
70
70
 
71
71
  $("#all_on").click(function () {
72
72
 
73
- $('.checkbox').attr("checked", true);//checkboxにチェックをつける。
73
+ $('.checkbox').prop("checked", true);//checkboxにチェックをつける。
74
74
 
75
- $("#send").attr("disabled", false);//送信ボタンを有効化する。
75
+ $("#send").prop("disabled", false);//送信ボタンを有効化する。
76
76
 
77
77
  });
78
78
 
@@ -80,9 +80,9 @@
80
80
 
81
81
  $("#all_off").click(function () {
82
82
 
83
- $('.checkbox').attr("checked", false);//checkboxのチェックをはずす。
83
+ $('.checkbox').prop("checked", false);//checkboxのチェックをはずす。
84
84
 
85
- $("#send").attr("disabled", true);//送信ボタンを無効化する。
85
+ $("#send").prop("disabled", true);//送信ボタンを無効化する。
86
86
 
87
87
  });
88
88
 
@@ -92,11 +92,11 @@
92
92
 
93
93
  if ($(".checkbox:checked").length >= 1) {//チェックされているチェックボックスが1つ以上あれば
94
94
 
95
- $("#send").attr("disabled", false);//送信ボタンを有効化する。
95
+ $("#send").prop("disabled", false);//送信ボタンを有効化する。
96
96
 
97
97
  } else {
98
98
 
99
- $("#send").attr("disabled", true);//送信ボタンを無効化する。
99
+ $("#send").prop("disabled", true);//送信ボタンを無効化する。
100
100
 
101
101
  }
102
102
 

3

修正

2017/01/08 01:45

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  $("#all_on").click(function () {
72
72
 
73
- $('.checkbox').prop('checked', true);//checkboxにチェックをつける。
73
+ $('.checkbox').attr("checked", true);//checkboxにチェックをつける。
74
74
 
75
75
  $("#send").attr("disabled", false);//送信ボタンを有効化する。
76
76
 
@@ -80,7 +80,7 @@
80
80
 
81
81
  $("#all_off").click(function () {
82
82
 
83
- $('.checkbox').prop('checked', false);//checkboxのチェックをはずす。
83
+ $('.checkbox').attr("checked", false);//checkboxのチェックをはずす。
84
84
 
85
85
  $("#send").attr("disabled", true);//送信ボタンを無効化する。
86
86
 

2

修正

2017/01/08 01:43

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -18,57 +18,85 @@
18
18
 
19
19
  <div id="select">
20
20
 
21
- <input type="checkbox" class="checkbox" name="check_1"/><label>チェック1</label>
21
+ <label>
22
22
 
23
- <input type="checkbox" class="checkbox" name="check_2"/><label>チェック2</label>
23
+ <input type="checkbox" class="checkbox" name="check_1">チェック1
24
24
 
25
- <input type="checkbox" class="checkbox" name="check_3"/><label>チェック3</label>
25
+ </label>
26
26
 
27
- <input type="checkbox" class="checkbox" name="check_4"/><label>チェック4</label>
27
+ <label>
28
28
 
29
+ <input type="checkbox" class="checkbox" name="check_2">チェック2
30
+
31
+ </label>
32
+
33
+ <label>
34
+
35
+ <input type="checkbox" class="checkbox" name="check_3">チェック3
36
+
37
+ </label>
38
+
39
+ <label>
40
+
41
+ <input type="checkbox" class="checkbox" name="check_4">チェック4
42
+
43
+ </label>
44
+
45
+ <label>
46
+
29
- <input type="checkbox" class="checkbox" name="check_5"/><label>チェック5</label>
47
+ <input type="checkbox" class="checkbox" name="check_5">チェック5
48
+
49
+ </label>
30
50
 
31
51
  </div>
32
52
 
53
+ <input type="button" name="all_on" id="all_on" value="全選択">
33
54
 
55
+ <input type="button" name="all_off" id="all_off" value="全解除">
34
56
 
35
- <input type="button" name="allon" id="allon" value="全選択"/>
36
-
37
- <input type="button" name="alloff" id="alloff" value="全解除"/>
38
-
39
- <input type="button" name="send" id="send" value="送信"/>
57
+ <input type="button" name="send" id="send" value="送信">
40
58
 
41
59
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
42
60
 
43
61
  <script>
44
62
 
45
- $("#send").prop("disabled", true);
63
+ $(document).ready(function () {
46
64
 
47
-
48
-
49
- $("#allon").click(function () {
50
-
51
- $("#select input.checkbox").attr("checked", "checked");
65
+ $("#send").attr("disabled", true);//ページが読み込み終わったら実行。
52
66
 
53
67
  });
54
68
 
55
69
 
56
70
 
57
- $("#alloff").click(function () {
71
+ $("#all_on").click(function () {
58
72
 
73
+ $('.checkbox').prop('checked', true);//checkboxにチェックをつける。
74
+
59
- $("#select input.checkbox").removeAttr("checked");
75
+ $("#send").attr("disabled", false);//送信ボタンを有効化する。
60
76
 
61
77
  });
62
78
 
63
- $("input[type='checkbox']").click(function () {
64
79
 
65
- if ($(".checkbox:checked").length >= 1) {
66
80
 
81
+ $("#all_off").click(function () {
82
+
83
+ $('.checkbox').prop('checked', false);//checkboxのチェックをはずす。
84
+
85
+ $("#send").attr("disabled", true);//送信ボタンを無効化する。
86
+
87
+ });
88
+
89
+
90
+
91
+ $("input[type='checkbox']").change(function () {//チェックボックスの内容が変更されたとき。
92
+
93
+ if ($(".checkbox:checked").length >= 1) {//チェックされているチェックボックスが1つ以上あれば
94
+
67
- $("#send").attr("disabled", false);
95
+ $("#send").attr("disabled", false);//送信ボタンを有効化する。
68
96
 
69
97
  } else {
70
98
 
71
- $("#send").attr("disabled", true);
99
+ $("#send").attr("disabled", true);//送信ボタンを無効化する。
72
100
 
73
101
  }
74
102
 

1

修正

2017/01/08 01:42

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -60,9 +60,7 @@
60
60
 
61
61
  });
62
62
 
63
- $("input" +
64
-
65
- "[type='checkbox']").click(function () {
63
+ $("input[type='checkbox']").click(function () {
66
64
 
67
65
  if ($(".checkbox:checked").length >= 1) {
68
66