チェックかつ入力されたら送信可能にするボタンを実装したい

Question

入力フォームについてチェックボックスをチェック済みかつinputタグを入力して初めて送信ボタンを選択可能にする方法を知りたいです。

html構成は以下の通りです。

<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<p><input type="checkbox" id="check"><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label></p>
<input type="submit" id="submit" value="Submit">

チェックボックスのみ入力のみの処理は分かったのですが、両方を満たす場合の条件の処理がわからない状態です。

▼チェックボックスのみ

$(function() {
	$('#submit').prop('disabled', true);
	$('#check').on('click', function() {
		if ($(this).prop('checked') == false) {
			$('#submit').prop('disabled', true);
		} else {
			$('#submit').prop('disabled', false);
		}
	});
});

▼入力のみ

$(function() {
	$('#submit').prop('disabled', true);
	$('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
		if ($(this).val().length > 0) {
			$('#submit').prop('disabled', false);
		} else {
			$('#submit').prop('disabled', true);
		}
	});
});

また可能であれば、送信ボタンが選択不可時には「value="入力と規約承諾を完了して下さい"」「class="disabled"」で、選択可能時には「value="登録する"」「class="abled"」への切り替えも行いたいです。

当方jquery初心者で理解度が低く恐縮ですが、ご教授の程よろしくお願いいたします。

追記=============================
disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました。
ただ、#submitのvalueとclassの切り替え方法がわかりません。
現在以下の記述を試しているのですがinput入力の有無での切り替えがうまくいかない状態です。
この点もご教授頂けば幸いです。

$(function() {
    var flag = 0b11;
    $('#submit').prop('disabled', flag);
    $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
    $('#submit').addClass("disabled");

    $('#check').on('click', function() {
        if ($(this).prop('checked') == false) {
            $('#submit').prop('disabled', flag = flag | 0b10);
            $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
            $('#submit').addClass("disabled");
            $('#submit').removeClass("abled");
        } else {
            $('#submit').prop('disabled', flag = flag & 0b01);
            $('#submit').attr({"value":"登録する"});
            $('#submit').addClass("abled");
            $('#submit').removeClass("disabled");
        }
    });
    $('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
        if ($(this).val().length > 0) {
            $('#submit').prop('disabled', flag = flag & 0b10);
            $('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
            $('#submit').addClass("disabled");
            $('#submit').removeClass("abled");
        } else {
            $('#submit').prop('disabled', flag = flag | 0b01);
            $('#submit').attr({"value":"登録する"});
            $('#submit').addClass("abled");
            $('#submit').removeClass("disabled");
        }
    });
});

Comments

[ItoTomonori]

ご自身でどこまで、書かれているのか？そして実際のフォームなど、タグやクラスの構造などが、わからないと、何とも解答できません。

[castail]

失礼いたしました。現状試している内容を追記しました。

Answer 1

チェックボックスの場合、<input type="checkbox" required>とすれば、（iOSなど一部非対応ブラウザはありますが）「チェックを付けなければ送信しない」というのを、JavaScriptなしで実装できます。

Comments

[castail]

ご回答ありがとうございます。
せっかくですが今回iOS必須であるためご教授いただいた内容では条件を満たすことができません。

Answer 2

総当たりで確認する方が早い気もします。

$( function() {
	var $s = $( '#submit' ), $c = $( '#check' ), $t = $( '#text1, #text2, #text3' );
	function toggleSubmitClass( flag ){
		$s.prop( 'disabled', flag );
		if ( flag ){
			$s.addClass( 'disabled' ).removeClass( 'abled' ).attr( { 'value' : '入力と規約承諾を完了して下さい' } );
		}else{
			$s.addClass( 'abled' ).removeClass( 'disabled' ).attr( { 'value' : '登録する' } );
		}
	}
	function ckFlag(){
		var flag = false;
		/*
		ここでチェックを確認してだめならtoggleSubmitClassを呼ぶ
		*/
		/*
		ここでテキストを総当たりで確認し、だめなものがあればflag = true;にする
		*/
		toggleSubmitClass( flag );
	}
	ckFlag();
	$c.on( 'click', ckFlag );
	$t.on( 'keydown keyup keypress change', ckFlag );
});

Comments

[castail]

ご連絡が遅くなり申し訳ございません。

ご回答ありがとうございます。
ご教授頂いた内容を試したのですがこちらではうまく処理されませんでした。
「Lhankor_Mhy」さんもこちらでうまくいくというご回答だったので、こちら側の記述ミスなどの可能性が高いと思いますので引き続き検証したいと思います。

ただ、今回は解答スピードの速さやご丁寧に複数回ご回答頂いた点、などを踏まえ「Lhankor_Mhy」さんへベストアンサーをつけさせていただきたいと思います。
何卒ご了承ください。

Answer 3

$(function() {
	var flag = 0b11;
	$('#submit').prop('disabled', flag);
	
	$('#check').on('click', function() {
		if ($(this).prop('checked') == false) {
			$('#submit').prop('disabled', flag = flag | 0b10);
		} else {
			$('#submit').prop('disabled', flag = flag & 0b01);
		}
	});
	$('#text').on('keydown keyup keypress change', function() {
		if ($(this).val().length > 0) {
			$('#submit').prop('disabled', flag = flag & 0b10);
		} else {
			$('#submit').prop('disabled', flag = flag | 0b01);
		}
	});
});

https://jsfiddle.net/s54y6fcr/



#####コメントを受けて追記

$(function() {
	function toggleSubmitClass(flag){
		$('#submit').prop('disabled', flag);
		if (flag){
			$('#submit').attr({"value":"入力と規約承諾を完了して下さい"});
			$('#submit').addClass("disabled");
			$('#submit').removeClass("abled");
		}else{
			$('#submit').attr({"value":"登録する"});
			$('#submit').addClass("abled");
			$('#submit').removeClass("disabled");
		}
	}
	var flag = 0b11;
	toggleSubmitClass(flag);
	
	$('#check').on('click', function() {
		if ($(this).prop('checked') == false) {
			flag = flag | 0b10;
		} else {
			flag = flag & 0b01;
		}
		toggleSubmitClass(flag);
	});
	$('#text1,#text2,#text3').on('keydown keyup keypress change', function() {
		if ($(this).val().length > 0) {
			flag = flag & 0b10;
		} else {
			flag = flag | 0b01;
		}
		toggleSubmitClass(flag);
	});
	
});

https://jsfiddle.net/s54y6fcr/1/
うーん、とりあえず、ご希望の対応をしてみましたが、#textまわりのイベント処理が微妙だと思いますので、適宜修正してくださいね。



#####追記
kei344さんのご回答のとおりかと思います。

function ckFlag(){
	var flag = $t.add($c.filter(':checked')).map(function(i,e){return $(e).val() || null}).length == $t.length + $c.length ;
	toggleSubmitClass( !flag );
}

https://jsfiddle.net/s54y6fcr/3/

Comments

[Lhankor_Mhy]

あら、質問に追記が……
ロジックは同じことなので、この回答で大丈夫でしょうか？

[castail]

ご回答ありがとうございます。
disableの処理はLhankor_Mhy様にご教授頂いた内容で実現できました！
感謝いたします。

ただ、#submitのvalueとclassの切り替え方法がわかりません。
input入力の有無での切り替えがうまくいかない状態です。
現在試している内容を上部「追記」として記述しております。
大変お手数ですが、この点もご教授願えませんでしょうか？

[Lhankor_Mhy]

追記しました。

[castail]

ご回答ありがとうございます。

ご教授頂いた内容を試したのですが、チェックボックス選択状態で入力欄1箇所のみ文字を入力すると他の入力欄は空にも関わらず、「disabled」は解除され「value="登録する"」「class="abled"」となります。この状態でも選択不可状態にできないでしょうか？

ご回答の程よろしくお願いいたします。

[Lhankor_Mhy]

kei344さんのご回答のとおりかと思います。一例を追記しました。

[castail]

ご連絡が遅くなり申し訳ございません。

ご回答ありがとうございます。
ご教授頂いた内容を再度試したいと思います。