質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

16912閲覧

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

thanatos04050jk

総合スコア19

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/01/08 01:03

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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});

jsFiddleの動くサンプル

投稿2017/01/08 01:30

編集2017/01/08 01:36
popobot

総合スコア6586

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thanatos04050jk

2017/01/08 10:49

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

0

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

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>

投稿2017/01/08 01:20

編集2017/01/08 01:45
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自分の書いたソースが何を意味しているのか考えてみてください。

1送信ボタンを無効化
2全選択押下で全チェック
3全解除押下で全チェック外し
4チェックボックスにチェックが1個以上入ってたら、送信ボタンを有効化

4は初期表示時に処理されるので、
その後チェックボックスにチェックを入れたタイミングや、
全選択、全解除を押下したタイミングでは処理されません。

なので、
チェックボックスにチェックを入れたタイミングや、
全選択、全解除を押下したタイミングで
4の処理を呼び出すように書き換えれば動作すると思います。
(あんまりよいロジックではないですが)

投稿2017/01/08 01:22

lightwill

総合スコア962

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問