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

質問編集履歴

3

文言追加

2019/11/27 02:19

投稿

hamuhamukushi
hamuhamukushi

スコア7

title CHANGED
File without changes
body CHANGED
@@ -2,10 +2,17 @@
2
2
 
3
3
  JavaScriptでチェックかつ入力したら有効になるボタンを実装したいです。
4
4
 
5
+
5
6
  チェックボックス1つ、テキストボックス1つのフォームを作りました。
7
+
6
8
  チェックボックスを選択状態かつテキストボックスに文字を入力したときのみ有効で、片方または両方が選択・未入力の時はボタンが無効になるようにしたいです。
9
+
7
10
  チェックボックスをクリックするときも、文字を入力したときもリアルタイムでボタンの有効・無効が切り替わるようにしたいです。
8
11
 
12
+ できれば条件分岐などでフォームは1つを有効無効を切り替えて使用したいです。
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

文言追加

2019/11/27 02:19

投稿

hamuhamukushi
hamuhamukushi

スコア7

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

誤字

2019/11/27 01:39

投稿

hamuhamukushi
hamuhamukushi

スコア7

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
  });