回答編集履歴
2
`input\[type=checkbox\]` のいずれかがチェックオンで `input\[type=submit\]` が活性化するように、`index` 値をフォームに埋め込むように修正
answer
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
`change` イベントを監視すれば input[type=submit] の有効化機能を実装可能ですが、submit したらページ遷移するので `++index` の結果は常に `1` になります。
|
|
4
4
|
(下記コードではわかりやすいように `event.preventDefault()` してます。)
|
|
5
5
|
|
|
6
|
-
- [input[type=
|
|
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
|
-
|
|
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(
|
|
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">チェック１<br>
|
|
44
45
|
<input type="checkbox" id="check2" name="answer[]" value="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=
|
|
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\]` が無効化されるように修正
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
|
-
|
|
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
|
-
|
|
20
|
+
elements['submit'].disabled = inputs.filter(filterfn).length !== inputs.length;
|
|
16
|
-
|
|
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">チェック１<br>
|
|
44
|
+
<input type="checkbox" id="check2" name="answer[]" value="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 さん
|