Q&A
ご回答ありがとうございます。
こういったやり方もありますね。
勉強になりました！
またよろしくお願いいたします！！
jqueryに関して至急ご回答いただければ幸いです。
実現したいこと
必須セレクト、必須1のテキストを入力するまで、必須2のインプット、チェックのブロックを入力できないようにする。
必須セレクト、必須1のテキストが入力されたら、必須2のインプットへ行けるようにdisabledを外す。
必須2のインプットが入力されたら、チェックのブロックを動かさせるようにする。
必須２、チェックブロックは初期状態は、オパシティをかけて薄くしておく。
入力してる部分にボーダーをつけたい。（外側のdivに）
html
1<form action="/"> 2 3 <div class="hisu1wrap"> 4 <label for=""> 5 <select name="" id="hoge1"> 6 <option value="Select">必須セレクト</option> 7 <option value="aaa">aaa</option> 8 <option value="bbb">bbb</option> 9 </select> 10 </label> 11 <input type="text" maxlength="50" class="hisu1" placeholder="テキスト入れてください">必須1 12 </div> 13 14 <div class="hisu2wrap"> 15 <input type="text" maxlength="200" class="hisu2" placeholder="テキスト入れてくください2" disabled>必須2 16 </div> 17 18 <div class="check"> 19 <label class="check__lay__label"> 20 <input name="checkbox" type="checkbox" value="hoge1" class="check__input">hoge1 21 </label> 22 23 <label class="check__lay__label"> 24 <input name="checkbox" type="checkbox" value="hoge2" class="check__input">hoge2 25 </label> 26 27 <label class="check__lay__label"> 28 <input name="checkbox" type="checkbox" value="hoge3" class="check__input">hoge3 29 </label> 30 31 <label class="check__lay__label"> 32 <input name="checkbox" type="checkbox" value="hoge4" class="check__input">hoge4 33 </label> 34 35 <label class="check__lay__label"> 36 <input name="checkbox" type="checkbox" value="hoge5" class="check__input">hoge5 37 </label> 38 39 <label class="check__lay__label"> 40 <input name="checkbox" type="checkbox" value="hoge6" class="check__input">hoge6 41 </label> 42 </div> 43 44 45 <input type="submit" value="Confirm" class="confirm_btn"> 46</form>
javascript
1$(function(){ 2 var style_change = { 3 "opacity":"1", 4 } 5 var style_change_inner = { 6 "border": "3px solid #51D7CC" 7 } 8 var style_reset = { 9 "border": "0" 10 } 11 $('#hoge1,.hisu1').on({ 12 change: function() { 13 $('.hisu2wrap').css(style_change); 14 // $('').css(style_change_inner); 15 $(').css(style_reset); 16 $('').prop('disabled', false); 17 } 18 }); 19 $('').on({ 20 change: function() { 21 $('').css(style_change); 22 // $('').css(style_change_inner); 23 $('').css(style_reset); 24 $('').attr('disabled', false); 25 } 26 }); 27 $('').on({ 28 change: function() { 29 $('').css(style_change); 30 $('').attr('disabled', false); 31 // $('').css(style_change_inner); 32 // $('.').css(style_reset); 33 // $('').attr('disabled', false); 34 } 35 }); 36}) 37 38 39$('') 40 .focusin(function(e) { 41 $("").css('border', '3px solid #51D7CC'); 42 }) 43 .focusout(function(e) { 44 $("").css('border', '0'); 45 }); 46 $('.contents__wants') 47 .focusin(function(e) { 48 $("").css('border', '3px solid #51D7CC'); 49 }) 50 .focusout(function(e) { 51 $("").css('border', '0'); 52 }); 53 $('.contents__requests') 54 .focusin(function(e) { 55 $("").css('border', '3px solid #51D7CC'); 56 }) 57 .focusout(function(e) { 58 $("").css('border', '0'); 59 }); 60 61 $('').on("change", function(e){ 62 $("").css('border', '3px solid #51D7CC'); 63 }); 64
すみません、jqueryの経験値が薄いもので、できそうなメソッドやプロパティを途中まで書きましたが、うまく機能せずでした。
こういった場合、focusinやchangeメソッドを使って組み立てる感じでしょうか。
詳しい方、大変困ってますので、どうかよろしくお願いいたします。
回答2件
0
ベストアンサー
changeイベントが発生するのは入力フォームからフォーカスが外れたときなので、入力フォームに入力があったと同時に何か処理を行いたいときはkeyupイベントを使うほうが適切だと思います。また、jQueryからcssのスタイルを指定したいときはcssメソッドを使います。
質問文を読み間違えているかもしれませんが、以上を踏まえると質問者さんの実現したい動作は次のように書けると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form id="form1"> 9 <div id="now"> 10 <label for="text1"> 11 必須1 12 <input type="text" id="text1"> 13 </label> 14 </div> 15 <div id="now1"> 16 <label for="text2"> 17 必須2 18 <input type="text" id="text2"> 19 </label> 20 </div> 21 <div id="now2"> 22 <label for="text3"> 23 必須3 24 <input type="text" id="text3"> 25 </label> 26 </div> 27 <div id="now3"> 28 <label for="text3_checkbox"> 29 必須3チェックボックス 30 <input type="checkbox" id="text3_checkbox"> 31 </label> 32 </div> 33</form> 34<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 35<script> 36 $(document).ready(function () { 37 var checkbox = $("#text3_checkbox"); 38 $("#text2").prop("disabled", true); 39 $("#text3").prop("disabled", true); 40 checkbox.prop("disabled", true); 41 $("#now").css({"border": "solid 1px #ff0000"}); 42 checkbox.css({"opacity": "0"}); 43 }); 44 $("#text1").keyup(function () { 45 if ($(this).val() != "") { 46 $("#text2").prop("disabled", false); 47 $("#now").css({"border": ""}); 48 $("#now1").css({"border": "solid 1px #ff0000"}); 49 } else { 50 $("#text2").prop("disabled", true); 51 } 52 }); 53 $("#text2").keyup(function () { 54 if ($(this).val() != "") { 55 $("#text3").prop("disabled", false); 56 $("#now1").css({"border": ""}); 57 $("#now2").css({"border": "solid 1px #ff0000"}); 58 } else { 59 $("#text3").prop("disabled", true); 60 } 61 }); 62 $("#text3").keyup(function () { 63 if ($(this).val() != "") { 64 var checkbox = $("#text3_checkbox"); 65 checkbox.prop("disabled", false); 66 checkbox.css({"opacity": "1"}); 67 $("#now2").css({"border": ""}); 68 $("#now3").css({"border": "solid 1px #ff0000"}); 69 } else { 70 $("#text3_checkbox").prop("disabled", true); 71 } 72 }); 73 $("#text3_checkbox").change(function () { 74 if ($(this).is(":checked")) { 75 $("#now3").css({"border": ""}); 76 } 77 }) 78</script> 79</body> 80</html>
追記
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form id="form1"> 9 <div id="now"> 10 <label for="text1"> 11 必須1 12 <input type="text" id="text1"> 13 </label> 14 </div> 15 <div id="now1"> 16 <label for="text2"> 17 必須2 18 <input type="text" id="text2"> 19 </label> 20 </div> 21 <div id="now2"> 22 <label for="text3"> 23 必須3 24 <input type="text" id="text3"> 25 </label> 26 </div> 27 <div id="now3"> 28 <label for="text3_checkbox"> 29 必須3チェックボックス 30 <input type="checkbox" id="text3_checkbox"> 31 </label> 32 </div> 33</form> 34<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 35<script> 36 $(document).ready(function () { 37 var checkbox = $("#text3_checkbox"); 38 $("#text2").prop("disabled", true); 39 $("#text3").prop("disabled", true); 40 checkbox.prop("disabled", true); 41 $("#now").css({"border": "solid 1px #ff0000"}); 42 checkbox.css({"opacity": "0"}); 43 }); 44 $("#text1").keyup(function () { 45 if ($(this).val() != "") { 46 $("#text2").prop("disabled", false); 47 $("#now").css({"border": ""}); 48 $("#now1").css({"border": "solid 1px #ff0000"}); 49 } else { 50 $("#text2").prop("disabled", true); 51 } 52 }); 53 $("#text2").keyup(function () { 54 if ($(this).val() != "") { 55 $("#text3").prop("disabled", false); 56 $("#now1").css({"border": ""}); 57 $("#now2").css({"border": "solid 1px #ff0000"}); 58 } else { 59 $("#text3").prop("disabled", true); 60 } 61 }); 62 $("#text3").keyup(function () { 63 if ($(this).val() != "") { 64 var checkbox = $("#text3_checkbox"); 65 checkbox.prop("disabled", false); 66 checkbox.css({"opacity": "1"}); 67 $("#now2").css({"border": ""}); 68 $("#now3").css({"border": "solid 1px #ff0000"}); 69 } else { 70 $("#text3_checkbox").prop("disabled", true); 71 } 72 }); 73 $("#text3_checkbox").change(function () { 74 if ($(this).is(":checked")) { 75 $("#now3").css({"border": ""}); 76 } 77 }); 78 $("#text1").focus(function () { 79 $("#now1").css({"border": ""}); 80 $("#now2").css({"border": ""}); 81 $("#now3").css({"border": ""}); 82 $("#now").css({"border": "solid 1px #ff0000"}); 83 }); 84 $("#text2").focus(function () { 85 $("#now").css({"border": ""}); 86 $("#now2").css({"border": ""}); 87 $("#now3").css({"border": ""}); 88 $("#now1").css({"border": "solid 1px #ff0000"}); 89 }); 90 $("#text3").focus(function () { 91 $("#now").css({"border": ""}); 92 $("#now1").css({"border": ""}); 93 $("#now3").css({"border": ""}); 94 $("#now2").css({"border": "solid 1px #ff0000"}); 95 }); 96 $("#text3_checkbox").focus(function () { 97 $("#now").css({"border": ""}); 98 $("#now1").css({"border": ""}); 99 $("#now2").css({"border": ""}); 100 $("#now3").css({"border": "solid 1px #ff0000"}); 101 }); 102</script> 103</body> 104</html>
投稿2016/12/21 13:56
編集2016/12/21 15:42
総合スコア14731
0
こんな感じで制御すればいいのではないでしょうか。
デモ
css
1.hisu2wrap{ 2 display:inline-block; 3} 4.hisu2wrap.border{ 5 border-bottom: 2px solid red; 6}
js
1$('.hisu1').on('input', function() { 2 if($('.hisu1').val()) { 3 $('.hisu2').prop('disabled', false); 4 $('.hisu2wrap').addClass('border'); 5 } else { 6 $('.hisu2').prop('disabled', true); 7 $('.hisu2wrap').removeClass('border'); 8 } 9});
投稿2016/12/21 13:30
総合スコア4267
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/21 14:59 編集
2016/12/21 15:41
2016/12/22 15:35