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

回答編集履歴

1

修正

2016/12/21 15:42

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -81,4 +81,112 @@
81
81
  </script>
82
82
  </body>
83
83
  </html>
84
+ ```
85
+ 追記
86
+ ---
87
+ ```HTML
88
+ <!DOCTYPE html>
89
+ <html lang="ja">
90
+ <head>
91
+ <meta charset="UTF-8">
92
+ <title>タイトル</title>
93
+ </head>
94
+ <body>
95
+ <form id="form1">
96
+ <div id="now">
97
+ <label for="text1">
98
+ 必須1
99
+ <input type="text" id="text1">
100
+ </label>
101
+ </div>
102
+ <div id="now1">
103
+ <label for="text2">
104
+ 必須2
105
+ <input type="text" id="text2">
106
+ </label>
107
+ </div>
108
+ <div id="now2">
109
+ <label for="text3">
110
+ 必須3
111
+ <input type="text" id="text3">
112
+ </label>
113
+ </div>
114
+ <div id="now3">
115
+ <label for="text3_checkbox">
116
+ 必須3チェックボックス
117
+ <input type="checkbox" id="text3_checkbox">
118
+ </label>
119
+ </div>
120
+ </form>
121
+ <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
122
+ <script>
123
+ $(document).ready(function () {
124
+ var checkbox = $("#text3_checkbox");
125
+ $("#text2").prop("disabled", true);
126
+ $("#text3").prop("disabled", true);
127
+ checkbox.prop("disabled", true);
128
+ $("#now").css({"border": "solid 1px #ff0000"});
129
+ checkbox.css({"opacity": "0"});
130
+ });
131
+ $("#text1").keyup(function () {
132
+ if ($(this).val() != "") {
133
+ $("#text2").prop("disabled", false);
134
+ $("#now").css({"border": ""});
135
+ $("#now1").css({"border": "solid 1px #ff0000"});
136
+ } else {
137
+ $("#text2").prop("disabled", true);
138
+ }
139
+ });
140
+ $("#text2").keyup(function () {
141
+ if ($(this).val() != "") {
142
+ $("#text3").prop("disabled", false);
143
+ $("#now1").css({"border": ""});
144
+ $("#now2").css({"border": "solid 1px #ff0000"});
145
+ } else {
146
+ $("#text3").prop("disabled", true);
147
+ }
148
+ });
149
+ $("#text3").keyup(function () {
150
+ if ($(this).val() != "") {
151
+ var checkbox = $("#text3_checkbox");
152
+ checkbox.prop("disabled", false);
153
+ checkbox.css({"opacity": "1"});
154
+ $("#now2").css({"border": ""});
155
+ $("#now3").css({"border": "solid 1px #ff0000"});
156
+ } else {
157
+ $("#text3_checkbox").prop("disabled", true);
158
+ }
159
+ });
160
+ $("#text3_checkbox").change(function () {
161
+ if ($(this).is(":checked")) {
162
+ $("#now3").css({"border": ""});
163
+ }
164
+ });
165
+ $("#text1").focus(function () {
166
+ $("#now1").css({"border": ""});
167
+ $("#now2").css({"border": ""});
168
+ $("#now3").css({"border": ""});
169
+ $("#now").css({"border": "solid 1px #ff0000"});
170
+ });
171
+ $("#text2").focus(function () {
172
+ $("#now").css({"border": ""});
173
+ $("#now2").css({"border": ""});
174
+ $("#now3").css({"border": ""});
175
+ $("#now1").css({"border": "solid 1px #ff0000"});
176
+ });
177
+ $("#text3").focus(function () {
178
+ $("#now").css({"border": ""});
179
+ $("#now1").css({"border": ""});
180
+ $("#now3").css({"border": ""});
181
+ $("#now2").css({"border": "solid 1px #ff0000"});
182
+ });
183
+ $("#text3_checkbox").focus(function () {
184
+ $("#now").css({"border": ""});
185
+ $("#now1").css({"border": ""});
186
+ $("#now2").css({"border": ""});
187
+ $("#now3").css({"border": "solid 1px #ff0000"});
188
+ });
189
+ </script>
190
+ </body>
191
+ </html>
84
192
  ```