回答編集履歴

1

修正

2016/12/21 15:42

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -165,3 +165,219 @@
165
165
  </html>
166
166
 
167
167
  ```
168
+
169
+ 追記
170
+
171
+ ---
172
+
173
+ ```HTML
174
+
175
+ <!DOCTYPE html>
176
+
177
+ <html lang="ja">
178
+
179
+ <head>
180
+
181
+ <meta charset="UTF-8">
182
+
183
+ <title>タイトル</title>
184
+
185
+ </head>
186
+
187
+ <body>
188
+
189
+ <form id="form1">
190
+
191
+ <div id="now">
192
+
193
+ <label for="text1">
194
+
195
+ 必須1
196
+
197
+ <input type="text" id="text1">
198
+
199
+ </label>
200
+
201
+ </div>
202
+
203
+ <div id="now1">
204
+
205
+ <label for="text2">
206
+
207
+ 必須2
208
+
209
+ <input type="text" id="text2">
210
+
211
+ </label>
212
+
213
+ </div>
214
+
215
+ <div id="now2">
216
+
217
+ <label for="text3">
218
+
219
+ 必須3
220
+
221
+ <input type="text" id="text3">
222
+
223
+ </label>
224
+
225
+ </div>
226
+
227
+ <div id="now3">
228
+
229
+ <label for="text3_checkbox">
230
+
231
+ 必須3チェックボックス
232
+
233
+ <input type="checkbox" id="text3_checkbox">
234
+
235
+ </label>
236
+
237
+ </div>
238
+
239
+ </form>
240
+
241
+ <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
242
+
243
+ <script>
244
+
245
+ $(document).ready(function () {
246
+
247
+ var checkbox = $("#text3_checkbox");
248
+
249
+ $("#text2").prop("disabled", true);
250
+
251
+ $("#text3").prop("disabled", true);
252
+
253
+ checkbox.prop("disabled", true);
254
+
255
+ $("#now").css({"border": "solid 1px #ff0000"});
256
+
257
+ checkbox.css({"opacity": "0"});
258
+
259
+ });
260
+
261
+ $("#text1").keyup(function () {
262
+
263
+ if ($(this).val() != "") {
264
+
265
+ $("#text2").prop("disabled", false);
266
+
267
+ $("#now").css({"border": ""});
268
+
269
+ $("#now1").css({"border": "solid 1px #ff0000"});
270
+
271
+ } else {
272
+
273
+ $("#text2").prop("disabled", true);
274
+
275
+ }
276
+
277
+ });
278
+
279
+ $("#text2").keyup(function () {
280
+
281
+ if ($(this).val() != "") {
282
+
283
+ $("#text3").prop("disabled", false);
284
+
285
+ $("#now1").css({"border": ""});
286
+
287
+ $("#now2").css({"border": "solid 1px #ff0000"});
288
+
289
+ } else {
290
+
291
+ $("#text3").prop("disabled", true);
292
+
293
+ }
294
+
295
+ });
296
+
297
+ $("#text3").keyup(function () {
298
+
299
+ if ($(this).val() != "") {
300
+
301
+ var checkbox = $("#text3_checkbox");
302
+
303
+ checkbox.prop("disabled", false);
304
+
305
+ checkbox.css({"opacity": "1"});
306
+
307
+ $("#now2").css({"border": ""});
308
+
309
+ $("#now3").css({"border": "solid 1px #ff0000"});
310
+
311
+ } else {
312
+
313
+ $("#text3_checkbox").prop("disabled", true);
314
+
315
+ }
316
+
317
+ });
318
+
319
+ $("#text3_checkbox").change(function () {
320
+
321
+ if ($(this).is(":checked")) {
322
+
323
+ $("#now3").css({"border": ""});
324
+
325
+ }
326
+
327
+ });
328
+
329
+ $("#text1").focus(function () {
330
+
331
+ $("#now1").css({"border": ""});
332
+
333
+ $("#now2").css({"border": ""});
334
+
335
+ $("#now3").css({"border": ""});
336
+
337
+ $("#now").css({"border": "solid 1px #ff0000"});
338
+
339
+ });
340
+
341
+ $("#text2").focus(function () {
342
+
343
+ $("#now").css({"border": ""});
344
+
345
+ $("#now2").css({"border": ""});
346
+
347
+ $("#now3").css({"border": ""});
348
+
349
+ $("#now1").css({"border": "solid 1px #ff0000"});
350
+
351
+ });
352
+
353
+ $("#text3").focus(function () {
354
+
355
+ $("#now").css({"border": ""});
356
+
357
+ $("#now1").css({"border": ""});
358
+
359
+ $("#now3").css({"border": ""});
360
+
361
+ $("#now2").css({"border": "solid 1px #ff0000"});
362
+
363
+ });
364
+
365
+ $("#text3_checkbox").focus(function () {
366
+
367
+ $("#now").css({"border": ""});
368
+
369
+ $("#now1").css({"border": ""});
370
+
371
+ $("#now2").css({"border": ""});
372
+
373
+ $("#now3").css({"border": "solid 1px #ff0000"});
374
+
375
+ });
376
+
377
+ </script>
378
+
379
+ </body>
380
+
381
+ </html>
382
+
383
+ ```