質問編集履歴
3
文言追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,10 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
JavaScriptでチェックかつ入力したら有効になるボタンを実装したいです。
|
|
4
4
|
|
|
5
|
+
|
|
5
6
|
チェックボックス１つ、テキストボックス１つのフォームを作りました。
|
|
7
|
+
|
|
6
8
|
チェックボックスを選択状態かつテキストボックスに文字を入力したときのみ有効で、片方または両方が選択・未入力の時はボタンが無効になるようにしたいです。
|
|
9
|
+
|
|
7
10
|
チェックボックスをクリックするときも、文字を入力したときもリアルタイムでボタンの有効・無効が切り替わるようにしたいです。
|
|
8
11
|
|
|
12
|
+
できれば条件分岐などでフォームは１つを有効無効を切り替えて使用したいです。
|
|
13
|
+
|
|
14
|
+
よろしくお願いいたします。
|
|
15
|
+
|
|
9
16
|
### 発生している問題・エラーメッセージ
|
|
10
17
|
|
|
11
18
|
エラーメッセージは出ていません。
|
|
@@ -24,8 +31,11 @@
|
|
|
24
31
|
$("[name='checkbox']").on('click', function() {
|
|
25
32
|
if ($("[name='checkbox']").prop('checked')) {
|
|
26
33
|
$(".linkBtn").prop("disabled", false);
|
|
34
|
+
$(".btn").removeClass("disabled");
|
|
35
|
+
|
|
27
36
|
} else {
|
|
28
37
|
$(".linkBtn").prop("disabled", true);
|
|
38
|
+
$(".btn").addClass("disabled");
|
|
29
39
|
}
|
|
30
40
|
});
|
|
31
41
|
|
|
@@ -33,15 +43,19 @@
|
|
|
33
43
|
if ($("[name='checkbox']").val().length > 0) {
|
|
34
44
|
if($("[name='checkbox']").prop('checked')) {
|
|
35
45
|
$(".linkBtn").prop("disabled", false);
|
|
46
|
+
$(".btn").removeClass("disabled");
|
|
36
47
|
}else{
|
|
37
48
|
$(".linkBtn").prop("disabled", true);
|
|
49
|
+
$(".btn").addClass("disabled");
|
|
38
50
|
}
|
|
39
51
|
}
|
|
40
52
|
else {
|
|
41
53
|
if($("[name='checkbox']").prop('checked')) {
|
|
42
54
|
$(".linkBtn").prop("disabled", false);
|
|
55
|
+
$(".btn").removeClass("disabled");
|
|
43
56
|
}else{
|
|
44
57
|
$(".linkBtn").prop("disabled", true);
|
|
58
|
+
$(".btn").addClass("disabled");
|
|
45
59
|
}
|
|
46
60
|
}
|
|
47
61
|
});
|
|
@@ -60,7 +74,7 @@
|
|
|
60
74
|
<label for="inputId">Number</label>
|
|
61
75
|
<form:input maxlength="5" path="Number" />
|
|
62
76
|
</div>
|
|
63
|
-
<button class="linkBtn" type="submit" name="reception">次へ</button>
|
|
77
|
+
<button class="linkBtn btn" type="submit" name="reception">次へ</button>
|
|
64
78
|
</form:form>
|
|
65
79
|
```
|
|
66
80
|
### 補足情報（FW/ツールのバージョンなど）
|
2
文言追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,4 +48,19 @@
|
|
|
48
48
|
});
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
+
```HTML
|
|
52
|
+
<form:form action="/exercise/ex6/" method="post" modelAttribute="entry">
|
|
53
|
+
<div class="checkbox mgt0">
|
|
54
|
+
<label>
|
|
55
|
+
<input type="checkbox" name="checkbox"><b>ようこそ</b>
|
|
56
|
+
<p>Welcome</p>
|
|
57
|
+
</label>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="form">
|
|
60
|
+
<label for="inputId">Number</label>
|
|
61
|
+
<form:input maxlength="5" path="Number" />
|
|
62
|
+
</div>
|
|
63
|
+
<button class="linkBtn" type="submit" name="reception">次へ</button>
|
|
64
|
+
</form:form>
|
|
65
|
+
```
|
|
51
66
|
### 補足情報（FW/ツールのバージョンなど）
|
1
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,19 +12,20 @@
|
|
|
12
12
|
が、動かしてみると挙動がおかしく、片方しか有効になっていないのにボタンが押せたり、チェックボックスも入力もしているのにボタンが無効になっていたり、、といった状態です。
|
|
13
13
|
|
|
14
14
|
### 該当のソースコード
|
|
15
|
+
checkbox：チェックボックス
|
|
16
|
+
Number：テキストボックス
|
|
17
|
+
linkBtn：ボタン
|
|
15
18
|
|
|
19
|
+
|
|
16
20
|
```JavaScript
|
|
17
21
|
$(function() {
|
|
18
22
|
$(".linkBtn").prop("disabled", true);
|
|
19
|
-
$(".btn").addClass("disabled");
|
|
20
23
|
|
|
21
24
|
$("[name='checkbox']").on('click', function() {
|
|
22
25
|
if ($("[name='checkbox']").prop('checked')) {
|
|
23
26
|
$(".linkBtn").prop("disabled", false);
|
|
24
|
-
$(".btn").removeClass("disabled");
|
|
25
27
|
} else {
|
|
26
28
|
$(".linkBtn").prop("disabled", true);
|
|
27
|
-
$(".btn").addClass("disabled");
|
|
28
29
|
}
|
|
29
30
|
});
|
|
30
31
|
|
|
@@ -32,19 +33,15 @@
|
|
|
32
33
|
if ($("[name='checkbox']").val().length > 0) {
|
|
33
34
|
if($("[name='checkbox']").prop('checked')) {
|
|
34
35
|
$(".linkBtn").prop("disabled", false);
|
|
35
|
-
$(".btn").removeClass("disabled");
|
|
36
36
|
}else{
|
|
37
37
|
$(".linkBtn").prop("disabled", true);
|
|
38
|
-
$(".btn").addClass("disabled");
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
40
|
else {
|
|
42
41
|
if($("[name='checkbox']").prop('checked')) {
|
|
43
42
|
$(".linkBtn").prop("disabled", false);
|
|
44
|
-
$(".btn").removeClass("disabled");
|
|
45
43
|
}else{
|
|
46
44
|
$(".linkBtn").prop("disabled", true);
|
|
47
|
-
$(".btn").addClass("disabled");
|
|
48
45
|
}
|
|
49
46
|
}
|
|
50
47
|
});
|