text入力とselectの選択で、submitを押せるようにしたい

問い合わせフォームをを作成し、その中のmailaアドレスの入力、selectによる選択、textareaの入力で初めて送信ボタンを押せるようにしたいです。
一つのみの項目であればうまくいきますが、項目が複数になると反応してくれません。

###発生しいる問題・エラーメッセー
.submit-btnはdisplay:none;の状態で、非表示です。
入力及び選択済みで、 block要素の .submit-btn-blockを追加しようとしていますが、ボタンは非表示のままで反応がありません。
わたし的にはセレクトの選択で→$o.on( 'click', ckFlag ); というコードが違うのではと考えています。
わかるかたいらしたらこ教授お願いいたします。

私が参考にしたリンクを載せておきます。
リンク先

jsコード

var $s = $( '#submit' ), $t = $( '#mail-id','#text-id' ), $o = $( '#select-id' );
	function toggleSubmitClass( flag ){
		$s.prop( '.submit-btn', flag );
		if ( flag ){
			$s.addClass( 'submit-btn' ).removeClass( 'submit-btn-block' );
		}else{
			$s.addClass( 'submit-btn-block' ).removeClass( 'submit-btn' );
		}
	}
	function ckFlag(){
		var flag = $t.add($o.filter(':checked')).map(function(i,e){return $(e).val() || null}).length == $t.length + $o.length ;
		toggleSubmitClass( !flag );
	}
	ckFlag();
	$o.on( 'click', ckFlag );
	$t.on( 'keydown keyup keypress change', ckFlag );

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

harashow1701

2017/05/19 03:17

自分で書いたコードですか？どこかのコピペですか？

SteveLight

2017/05/19 03:21

自分のフォーム用に一部付け加えましたが、コピーしました。

Lhankor_Mhy

2017/05/19 03:24

$t = $( '#mail-id','#text-id' )はtypoだと思いますのでご確認ください。

kei344

2017/05/19 04:42

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、コードの取得元のURLは記載されたほうが良いと思います。

SteveLight

2017/05/19 09:29

Lhankor_Mhyさん　　ご投稿ありがとうございます。確認しましたが間違ってはいないようでした。

SteveLight

2017/05/19 09:30

kei344さん　ご指摘ありがとうございました。次回からはそのようにさせていただきます。ご迷惑おかけしました。

Lhankor_Mhy

2017/05/20 00:34 編集

$t = $( '#mail-id','#text-id' ) は意図しているコードであるとのことですが、このコードは「 #text-id の内部要素である #mail-id 」のjQueryオブジェクトを返します( http://api.jquery.com/jQuery/#selector-context )。HTMLが提示されていないため不明ですが、質問の内容から #text-id も #mail-id もフォーム部品だと思いますので、ちょっとありえない構造だと思います。もし本当に、このjQueryコードが間違っていないのであれば、HTML構造に間違いがありそうな気がします。再度確認してみてください。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLのソースがないので実態に合わないかもしれませんがこんな感じでどうでしょう

javascript
1$(function(){
2  $('#hoge').prop('disabled',true);
3  $('.require').on('change',function(){
4    var flg=true;
5    if(
6      $('input.require[type=text],textarea.require').filter(function(){
7        return $(this).val()=="";
8      }).length +
9      $('select.require').filter(function(){
10        return $(this).prop('selectedIndex')==0;
11      }).length > 0) flg=false;
12    $('#hoge').prop('disabled',!flg);
13  });
14});
15

必須項目にrequireクラスを付けました

html
1<input type="text" class="require"><br>
2<input type="text" class="require"><br>
3<select class="require">
4<option value="">---</option>
5<option value="1">1</option>
6<option value="2">2</option>
7<option value="3">3</option>
8</select><br>
9<select class="require">
10<option value="">---</option>
11<option value="1">1</option>
12<option value="2">2</option>
13<option value="3">3</option>
14</select><br>
15<textarea class="require"></textarea><br>
16<textarea class="require"></textarea><br>
17<input type="submit" value="go" id="hoge">
18

投稿2017/05/19 04:03

yambejp

総合スコア118268

SteveLight

2017/05/19 09:47

ほぼやりたいような動作ができました。ちなみにchageの部分をkeyupにすると最後にselctを選択しなければ、textの一文字目でボタンが押せるようになりますが（＝リアルタイム）、最後にselectを選択するとtextの文字を再度入力するまでボタンは非表示なのですが、これを最後にselectの選択時（＝リアルタイム）でもボタンを押せるようにはできますか？もしよければ簡単な説明だけでも教えていただけませんか？