jQueryで複数のチェックボックスのうち1つでもチェックしていたら送信ボタンを有効化する方法を教えてください。

JavascriptとjQueryを勉強中の者です。

実現したいのはjQueryで複数のチェックボックスのうち1つでもチェックしていたら送信ボタンを有効化する方法です。
フォーム要素で複数のチェックボックスがあります。
このうちの1つでもチェックが入っていたら、予め無効化しておいた「送信ボタン」を有効化させようとしています。
他に「全選択ボタン」と「全解除ボタン」があり、「全選択ボタン」押下で「送信ボタン」を有効化、「全解除ボタン」押下で「送信ボタン」を無効化させようとしています。
実際にコーディングして確認したところ、「全選択ボタン」と「全解除ボタン」押下時の挙動はうまくいくのですが、チェックボックスにチェックを入れた時に「送信ボタン」が有効化できません。
複数のチェックボックスということで.eachでのループでチェックされたチェックボックスの個数を取得し、個数が1以上の場合に「送信ボタン」の属性を変えて有効化させる方法を試しているのですが、実現したいのと異なる挙動となってしまいます。

HTMLは以下の通りです。

<div id="select">
	<input type="checkbox" class="checkbox" name="check_1" /><label>チェック1</label>
	<input type="checkbox" class="checkbox" name="check_2" /><label>チェック2</label>
	<input type="checkbox" class="checkbox" name="check_3" /><label>チェック3</label>
	<input type="checkbox" class="checkbox" name="check_4" /><label>チェック4</label>
	<input type="checkbox" class="checkbox" name="check_5" /><label>チェック5</label>
</div>

<input type="button" name="allon" id="allon" value="全選択" />
<input type="button" name="alloff" id="alloff" value="全解除" />
<input type="submit" name="send" id="send" value="送信" />

jQueryのコードは以下の通りです。


	$("#send").prop('disabled',true);

	$("#allon").click(function(){
		$("#select input.checkbox").attr("checked","checked");
	});

	$("#alloff").click(function(){
		$("#select input.checkbox").removeAttr("checked");
	});

	$("#select input.checkbox").each(function(){

		var cnt1 = $("#select input.checkbox:checked").length;

		if(cnt1 == 0) {
			$("#send").prop('disabled',true);
		} else {
			$("#send").prop('disabled',false);
		}
	});
});

jQueryはjquery-ui-1.8.19.custom.min.jsを使用しています。
挙動はIE8とFirefox50で確認しています。

まだjQueryを勉強し始めて日も浅く、上記コードも書籍等を参考に継ぎはぎで書いたもので文法的に不適切である可能性が高いのですが、うまく実現できる方法をご教示願えないでしょうか。

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

回答3件

ベストアンサー

eachではなくchangeイベントとかにすればできると思いますよ。
なお、全選択の処理が繰り返すと動かない問題とかもあったのでついでに直してみました。checkedはattrではなくpropを使わないとだめみたいです。

javascript
1$(function(){
2		$("#send").prop('disabled',true);
3
4    $("#allon").click(function(){
5        $("#select input.checkbox").prop("checked", true);
6        $("#send").prop('disabled',false);
7    });
8
9    $("#alloff").click(function(){
10        $("#select input.checkbox").prop("checked", false);
11        $("#send").prop('disabled',true);
12    });
13
14    $("#select input.checkbox").change(function(){
15
16        var cnt1 = $("#select input.checkbox:checked").length;
17
18        if(cnt1 == 0) {
19            $("#send").prop('disabled',true);
20        } else {
21            $("#send").prop('disabled',false);
22        }
23    });
24});

投稿2017/01/08 01:30

総合スコア6586

2017/01/08 10:49

返答が遅くなり申し訳ありませんでした。ご教示いただいた方法でうまくいきました。どうもありがとうございました。また機会がありましたらよろしくお願い致します。

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

以下のように行うとどうでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="select">
9    <label>
10        <input type="checkbox" class="checkbox" name="check_1">チェック1
11    </label>
12    <label>
13        <input type="checkbox" class="checkbox" name="check_2">チェック2
14    </label>
15    <label>
16        <input type="checkbox" class="checkbox" name="check_3">チェック3
17    </label>
18    <label>
19        <input type="checkbox" class="checkbox" name="check_4">チェック4
20    </label>
21    <label>
22        <input type="checkbox" class="checkbox" name="check_5">チェック5
23    </label>
24</div>
25<input type="button" name="all_on" id="all_on" value="全選択">
26<input type="button" name="all_off" id="all_off" value="全解除">
27<input type="button" name="send" id="send" value="送信">
28<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
29<script>
30    $(document).ready(function () {
31        $("#send").prop("disabled", true);//ページが読み込み終わったら実行。
32    });
33
34    $("#all_on").click(function () {
35        $('.checkbox').prop("checked", true);//checkboxにチェックをつける。
36        $("#send").prop("disabled", false);//送信ボタンを有効化する。
37    });
38
39    $("#all_off").click(function () {
40        $('.checkbox').prop("checked", false);//checkboxのチェックをはずす。
41        $("#send").prop("disabled", true);//送信ボタンを無効化する。
42    });
43
44    $("input[type='checkbox']").change(function () {//チェックボックスの内容が変更されたとき。
45        if ($(".checkbox:checked").length >= 1) {//チェックされているチェックボックスが1つ以上あれば
46            $("#send").prop("disabled", false);//送信ボタンを有効化する。
47        } else {
48            $("#send").prop("disabled", true);//送信ボタンを無効化する。
49        }
50    });
51</script>
52</body>
53</html>