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

質問編集履歴

2

再追記

2016/04/16 03:04

投稿

castail
castail

スコア117

title CHANGED
File without changes
body CHANGED
@@ -40,4 +40,47 @@
40
40
 
41
41
  また可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。
42
42
 
43
- 当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。
43
+ 当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。
44
+
45
+
46
+ 追記=============================
47
+ disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました。
48
+ ただ、#submitのvalueとclassの切り替え方法がわかりません。
49
+ 現在以下の記述を試しているのですがinput入力の有無での切り替えがうまくいかない状態です。
50
+ この点もご教授頂けば幸いです。
51
+
52
+ ```lang-javascript
53
+ $(function() {
54
+ var flag = 0b11;
55
+ $('#submit').prop('disabled', flag);
56
+ $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
57
+ $('#submit').addClass("disabled");
58
+
59
+ $('#check').on('click', function() {
60
+ if ($(this).prop('checked') == false) {
61
+ $('#submit').prop('disabled', flag = flag | 0b10);
62
+ $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
63
+ $('#submit').addClass("disabled");
64
+ $('#submit').removeClass("abled");
65
+ } else {
66
+ $('#submit').prop('disabled', flag = flag & 0b01);
67
+ $('#submit').attr({"value":"登録する"});
68
+ $('#submit').addClass("abled");
69
+ $('#submit').removeClass("disabled");
70
+ }
71
+ });
72
+ $('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
73
+ if ($(this).val().length > 0) {
74
+ $('#submit').prop('disabled', flag = flag & 0b10);
75
+ $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
76
+ $('#submit').addClass("disabled");
77
+ $('#submit').removeClass("abled");
78
+ } else {
79
+ $('#submit').prop('disabled', flag = flag | 0b01);
80
+ $('#submit').attr({"value":"登録する"});
81
+ $('#submit').addClass("abled");
82
+ $('#submit').removeClass("disabled");
83
+ }
84
+ });
85
+ });
86
+ ```

1

具体的記述追加

2016/04/16 03:04

投稿

castail
castail

スコア117

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,43 @@
1
1
  入力フォームについてチェックボックスをチェック済みかつinputタグを入力して初めて送信ボタンを選択可能にする方法を知りたいです。
2
2
 
3
- 以下のページのand条件バージョンです。
3
+ html構成は以下の通りです。
4
+ ```lang-html
5
+ <input type="text" id="text1">
6
+ <input type="text" id="text2">
7
+ <input type="text" id="text3">
8
+ <p><input type="checkbox" id="check"><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label></p>
4
- [or条件での実装方法](http://www.nxworld.net/tips/jquery-switch-disable-input-button.html)
9
+ <input type="submit" id="submit" value="Submit">
10
+ ```
11
+ チェックボックスのみ入力のみの処理は分かったのですが、両方を満たす場合の条件の処理がわからない状態です。
5
12
 
13
+ ▼チェックボックスのみ
14
+ ```lang-javascript
15
+ $(function() {
16
+ $('#submit').prop('disabled', true);
17
+ $('#check').on('click', function() {
18
+ if ($(this).prop('checked') == false) {
19
+ $('#submit').prop('disabled', true);
20
+ } else {
6
- 可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。
21
+ $('#submit').prop('disabled', false);
22
+ }
23
+ });
24
+ });
25
+ ```
7
26
 
27
+ ▼入力のみ
28
+ ```lang-javascript
29
+ $(function() {
30
+ $('#submit').prop('disabled', true);
31
+ $('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
32
+ if ($(this).val().length > 0) {
33
+ $('#submit').prop('disabled', false);
34
+ } else {
35
+ $('#submit').prop('disabled', true);
36
+ }
37
+ });
38
+ });
39
+ ```
40
+
41
+ また可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。
42
+
8
- ご教授の程よろしくお願いいたします。
43
+ 当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。