複数のチェックボックスと連動するボタン

Question

複数のチェックボックスを全て選択したときに押せるようになるボタンを作成したいです。
元々1つのチェックボックスで1つのボタンを制御するような仕様でしたが、
クライアントの希望で選択必須のチェックボックスが3つに増えました。
できれば現在のコードを元に修正したいのですが、どうすればよいでしょうか？

<!--checkbox1-->
  <input type="checkbox" name="name1" id="check1"><label for="check1">同意します-1</label>
<!--checkbox2-->
  <input type="checkbox" name="name2" id="check2"><label for="check2">同意します-2</label>
<!--checkbox3-->
  <input type="checkbox" name="name3" id="check3"><label for="check3">同意します-3</label>

<button type="submit" id="btn">すべて同意して送信</button>

$(function(){
	$("#check1").removeAttr("checked");
	$("#btn").attr("disabled", "disabled");
	$("#btn").addClass("inactive");
	$("#check1").click(function() {
		if (this.checked) {
			// チェックon時
			$("#btn").removeAttr("disabled");
			$("#btn").removeClass("inactive");
		} else {
			// チェックoff時
			$("#btn").attr("disabled", "disabled");
			$("#btn").addClass("inactive");
		}
	});
});

###補足
チェックoff時は.inactiveでボタンに半透明のスタイルをあてています。
ユーザビリティ的にもチェックのon/offでclassの付与はそのままにしたいです。

HTMLは必要と思われる個所だけ抜き出していますので、不足している記述などあればご指摘ください。
追記いたします。

###追記
tomohiro_obara様に貼っていただいたURLの方法応用したところ、うまくいきました。
（私のような方のために修正したコード記載いたします。）

<div id="wrapper">
  <input type="checkbox" name="name1" id="check1" class="checkbox"><label for="check1">同意します-1</label>
  <input type="checkbox" name="name2" id="check2" class="checkbox"><label for="check2">同意します-2</label>
  <input type="checkbox" name="name3" id="check3" class="checkbox"><label for="check3">同意します-3</label>

  <button type="submit" id="btn">すべて同意して送信</button>
</div>

$(function(){
        $('.checkbox').click(function(){
            var check_count = $('#wrapper :checked').length;
            if (check_count == 3 ){
				// チェックon時
				$("#btn").removeAttr("disabled");
				$("#btn").removeClass("inactive");
				} else {
				// チェックoff時
				$("#btn").attr("disabled", "disabled");
				$("#btn").addClass("inactive");
			}
        });
    });

他お二方のご回答も勉強になりました。
皆さん早々にご回答いただき本当にありがとうございました。

Answer 1

こんな感じでどうでしょうか？

<script>
$(function(){
  $("#check1,#check2,#check3").on('change',function(){
    $("#btn").prop('disabled',$("#check1,#check2,#check3").filter(':checked').length<3)
  }).change();
});
</script>

<input type="checkbox" name="name1" id="check1"><label for="check1">同意します-1</label>
<input type="checkbox" name="name2" id="check2"><label for="check2">同意します-2</label>
<input type="checkbox" name="name3" id="check3"><label for="check3">同意します-3</label>

<button type="submit" id="btn">すべて同意して送信</button>

追記

classの処理もありましたね、ではこうで

<style>
.inactive{
  background-Color:red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#check1,#check2,#check3").on('change',function(){
    var flg=$("#check1,#check2,#check3").filter(':checked').length<3;
    $("#btn")
      .prop('disabled',flg)
      .toggleClass('inactive',flg);
  }).change();
});
</script>

<input type="checkbox" name="name1" id="check1"><label for="check1">同意します-1</label>
<input type="checkbox" name="name2" id="check2"><label for="check2">同意します-2</label>
<input type="checkbox" name="name3" id="check3"><label for="check3">同意します-3</label>

<button type="submit" id="btn">すべて同意して送信</button>

Comments

[momi]

yambejp様
試してみたのですが、理想していたようには動いてくれませんでした…せっかくご回答頂いたのにすみません。
ありがとうございました。

Answer 2

とりあえず動いた。

$( _=> {
	var $_check = $( '[id^="check"]' ).prop( 'checked', false );
	var $_btn = $( '#btn' ).prop( 'disabled', true ).addClass( 'inactive' );
	$_check.click( _=> {
		if ( $_check.length === $_check.filter( ':checked' ).length ) {
			// チェックon時
			$_btn.prop( 'disabled', false ).removeClass( 'inactive' );
		} else {
			// チェックoff時
			$_btn.prop( 'disabled', true ).addClass( 'inactive' );
		}
	} );
} );

```**動くサンプル：**[https://jsfiddle.net/j5w2atvb/](https://jsfiddle.net/j5w2atvb/)

---

【jQueryで全選択・全解除はprop使う - Qiita】
[http://qiita.com/ituki_b/items/17eab8c38a2ad5392660](http://qiita.com/ituki_b/items/17eab8c38a2ad5392660)

---

**追記：**

少し改良。

```JavaScript
$( _=> {
	const $_btn = $( '#btn' ), $_check = $( '[id^="check"]' ).prop( 'checked', false );
	$_check.on( 'change', _=> {
		const ck = $_check.length === $_check.filter( ':checked' ).length;
		$_btn.prop( 'disabled', !ck )[ ck ? 'removeClass' : 'addClass' ]( 'inactive' );
	} ).change();
} );
```**動くサンプル：**[https://jsfiddle.net/j5w2atvb/1/](https://jsfiddle.net/j5w2atvb/1/)

Comments

[namimon]

kei344様
横から失礼します。
_=>
という記述ですが、()=>を短くするために、アンダースコアを引数として当てているというのはわかるのですが、
これってコーディング規約ではよくある記述方法なのでしょうか。

[kei344]

> コーディング規約ではよくある記述方法なのでしょうか。
すみません、どこかのサイトの記述を見て「短いから」という理由で使用しています。Underscore.js など「_」に意味があるライブラリ等を使用する可能性がある場合は別文字か「()」を使うと思いますので、規模の大きな規約では推奨されないような気もします。

[momi]

kei344様
デモのURLまで記載していただきありがとうございます。
試してみたのですがシンタックスエラーが出てしまったのと、constがIEでは使用できないようでして（環境について記載を忘れていました。すみません。）、今回は別の方のご回答を参考にさせて頂きました。
ありがとうございました。

[kei344]

解決されたようでよかったです。
IE対応なら const を varにして「_=>」を「function()」にすれば動くと思いますよ。（IE11で確認済み）
https://jsfiddle.net/j5w2atvb/2/

[momi]

ありがとうございます。勉強になります。
今後のためにも試してみます！

Answer 3

http://qiita.com/geshi/items/8af9b00f5959d0c512a1
この辺りを参考にどうぞ

Comments

[momi]

tomohiro_obara様
URL先の方法を応用したところ上手く動いてくれました！
超初心者の私でも理解できる内容で大変助かりました。
早々にご回答いただきありがとうございました。