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

回答編集履歴

2

`input\[type=checkbox\]` のいずれかがチェックオンで `input\[type=submit\]` が活性化するように、`index` 値をフォームに埋め込むように修正

2016/05/18 19:37

投稿

think49
think49

スコア18194

answer CHANGED
@@ -3,7 +3,7 @@
3
3
  `change` イベントを監視すれば input[type=submit] の有効化機能を実装可能ですが、submit したらページ遷移するので `++index` の結果は常に `1` になります。
4
4
  (下記コードではわかりやすいように `event.preventDefault()` してます。)
5
5
 
6
- - [input[type=radio] のチェックオンで input[type=submit} を有効化 - JSFiddle](https://jsfiddle.net/4hLf0bLu/)
6
+ - [input[type=checkbox] のチェックオンで input[type=submit] を有効化 - JSFiddle](https://jsfiddle.net/4hLf0bLu/2/)
7
7
 
8
8
  ```HTML
9
9
  <script>
@@ -17,12 +17,12 @@
17
17
  var elements = event.target.form.elements,
18
18
  inputs = jQuery(elements['answer[]']);
19
19
 
20
- elements['submit'].disabled = inputs.filter(filterfn).length !== inputs.length;
20
+ elements['submit'].disabled = inputs.filter(filterfn).length === 0;
21
-
22
21
  }
23
22
 
24
23
  function handleSubmit (event) {
24
+ event.target.elements['index'] = ++event.data.index;
25
- console.log(++event.data.index);
25
+ console.log(event.data.index);
26
26
  event.preventDefault();
27
27
  }
28
28
 
@@ -40,6 +40,7 @@
40
40
  </script>
41
41
 
42
42
  <form id="sample" method="post" action="">
43
+ <input type="hidden" name="index" value="0" />
43
44
  <input type="checkbox" id="check1" name="answer[]" value="1">チェック1<br>
44
45
  <input type="checkbox" id="check2" name="answer[]" value="2">チェック2<br>
45
46
  <input type="submit" id="submit" value="Submit">
@@ -48,7 +49,8 @@
48
49
  ```
49
50
 
50
51
  ### 更新履歴
51
- - 2016/05/19 00:04 `input[type=radio]` のチェックオフで `input[type=submit]` が無効化されるように修正
52
+ - 2016/05/19 00:04 `input[type=checkbox]` のチェックオフで `input[type=submit]` が無効化されるように修正
53
+ - 2016/05/19 04:34 `input[type=checkbox]` のいずれかがチェックオンで `input[type=submit]` が活性化するように、`index` 値をフォームに埋め込むように修正
52
54
 
53
55
 
54
56
 

1

`input\[type=radio\]` のチェックオフで `input\[type=submit\]` が無効化されるように修正

2016/05/18 19:36

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,7 +1,12 @@
1
+ ### change イベント
2
+
1
3
  `change` イベントを監視すれば input[type=submit] の有効化機能を実装可能ですが、submit したらページ遷移するので `++index` の結果は常に `1` になります。
2
4
  (下記コードではわかりやすいように `event.preventDefault()` してます。)
3
5
 
6
+ - [input[type=radio] のチェックオンで input[type=submit} を有効化 - JSFiddle](https://jsfiddle.net/4hLf0bLu/)
7
+
8
+ ```HTML
4
- ```JavaScript
9
+ <script>
5
10
  'use stirct';
6
11
  jQuery(function(jQuery) {
7
12
  function filterfn (i, element) {
@@ -12,9 +17,8 @@
12
17
  var elements = event.target.form.elements,
13
18
  inputs = jQuery(elements['answer[]']);
14
19
 
15
- if (inputs.filter(filterfn).length === inputs.length) {
20
+ elements['submit'].disabled = inputs.filter(filterfn).length !== inputs.length;
16
- elements['submit'].disabled = false;
21
+
17
- }
18
22
  }
19
23
 
20
24
  function handleSubmit (event) {
@@ -33,6 +37,19 @@
33
37
 
34
38
  main();
35
39
  });
40
+ </script>
41
+
42
+ <form id="sample" method="post" action="">
43
+ <input type="checkbox" id="check1" name="answer[]" value="1">チェック1<br>
44
+ <input type="checkbox" id="check2" name="answer[]" value="2">チェック2<br>
45
+ <input type="submit" id="submit" value="Submit">
46
+ <!-- <input type="button" id="submit" value="Submit"> -->
47
+ </form>
36
48
  ```
37
49
 
50
+ ### 更新履歴
51
+ - 2016/05/19 00:04 `input[type=radio]` のチェックオフで `input[type=submit]` が無効化されるように修正
52
+
53
+
54
+
38
55
  Re: milkif さん