フォームの入力内容によって送信ボタンの色を変更したいです。
入力内容はinputのtypeがcheckbox、number、textの3種類で、それぞれCMSの自動生成によるものなので
クラス名を利用しての制御となります。
現在下記の通り記述しているのですが、問題点が2点あり、それを解決するアドバイスをいただけましたら幸いです。
問題1 …
例えばどれか一つをチェックした後で数字を変更し、数字を0にした場合、チェックが残っているのに
送信ボタンの色が元に戻ってしまう。
問題2 …
同じ動作を繰り返しているのにソースが冗長になってしまっている。
Javascript
1<script type="text/javascript"> 2jQuery(document).ready(function() { 3//チェックされたら検索ボタンの色を変更 4$(".checkbox").click(function(){ 5 if($(this).prop("checked") == true) { 6 $('#form input[type="submit"]').css('background','#f00').css('box-shadow','#f00 0 0 0 8px'); 7 } else { 8 $('#form input[type="submit"]').css('background','#5fb000').css('box-shadow','#5fb000 0 0 0 8px'); 9} 10}) 11//数字が変更されたら検索ボタンの色を変更 12$(".number").change(function(){ 13 if($(this).val() > 0) { 14 $('#form input[type="submit"]').css('background','#f00').css('box-shadow','#f00 0 0 0 8px'); 15 } else { 16 $('#form input[type="submit"]').css('background','#5fb000').css('box-shadow','#5fb000 0 0 0 8px'); 17 } 18}) 19//キーワードが入力されたら検索ボタンの色を変更 20$(".text").change(function(){ 21 if($(this).val() != '') { 22 $('#form input[type="submit"]').css('background','#f00').css('box-shadow','#f00 0 0 0 8px'); 23 } else { 24 $('#form input[type="submit"]').css('background','#5fb000').css('box-shadow','#5fb000 0 0 0 8px'); 25 } 26}) 27}); 28</script>
以上です。
どうぞよろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー