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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

8003閲覧

jQueryで別フレーム内のチェックボックスの状態を取得する方法がうまくいきません

thanatos04050jk

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/01/08 14:15

編集2017/01/10 05:01

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

実現したいのはjQueryで子フレーム1にある複数のチェックボックスのうち1つでもチェックしていたら、子フレーム2にある送信ボタンを有効化する方法です。

まず親HTMLファイル(parent.html)があり、これは左右のフレームに分割されています。framesetタグで子フレーム1(right.html)と子フレーム2(left.html)を設定しています。
いずれのHTMLファイルも同一のサーバに配置してあります。
right.htmlには複数のチェックボックスが、left.htmlには「全選択ボタン」と「全解除ボタン」と予め無効化しておいた「送信ボタン」がそれぞれ配置してあり、jQueryの記述もleft.html内にあります。

この状態で
0. 番号left.html内の「全選択ボタン」押下でright.html内の全チェックボックスをチェックしてleft.html内の「送信ボタン」を有効化し、left.html内の「全解除ボタン」押下でright.html内の全チェックボックスのチェックを外してleft.html内の「送信ボタン」を無効化する。
②right.html内の複数のチェックボックスの1つでもチェックしていたら、left.html内の予め無効化していた「送信ボタン」を有効化する。
ということを実現したいのですがうまくいきません。

フレーム間のやりとりということで調べたら、セレクタの指定に"parent.フレーム名(frameタグのname属性値).document"を指定するとあり、jQueryのセレクタには指定してあります。

実際にコーディングして確認したところ、①の挙動はうまくいくのですが、②の挙動がうまくいかず「送信ボタン」が有効化できません。
複数のチェックボックスということで.lengthでチェックされたチェックボックスの個数を取得し、個数が1以上の場合に「送信ボタン」の属性を変えて有効化させる方法を試しているのですが、実現したいのと異なる挙動となってしまいます。
セレクタの書き方も"document.getElementById('select').contentWindow"を指定して試してみましたがうまくいきませんでした。

HTMLは以下の通りです。

parent.htmlの内容

HTML

1<frameset cols="300,*"> 2 <frame src="left.html" name="menu" id="menu"> 3 <frame src="right.html" name="main" id="main"> 4</frameset> 5

right.htmlの内容

HTML

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

left.htmlの内容

HTML

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

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

left.htmlの内容

JavaScript

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

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

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

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

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

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

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

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

namimon

2017/01/10 02:30

left.htmlの内容が記述されていないようです
thanatos04050jk

2017/01/10 05:04

ご指摘ありがとうございました。記述を追加しました。
guest

回答2

0

ベストアンサー

こちらの環境では、これでうまくいきました。お試しください。
ただし、<frameset>は非推奨のタグです。新しく作るのでしたら、<iframe>を使うか、1ファイルで済むような構造にするのをお勧めします。

<script> $(function(){ $("#main,#menu" ).on("load" , function (){ $leftFrame = top.frames[0].document.body; $rightFrame = top.frames[1].document.body; $("#send" , $leftFrame ).prop('disabled',true); $("#select" , $rightFrame ).on("change" ,function(){ var cnt1 = $("#select input.checkbox:checked", $rightFrame).length; if(cnt1 === 0){ $("#send" , $leftFrame ).prop('disabled',true); } else { $("#send" , $leftFrame ).prop('disabled',false); } }); $("#allon" , $leftFrame).on("click" , function(){ $("#select input.checkbox", $rightFrame).prop("checked", true); $("#send", $leftFrame).prop('disabled',false); }); $("#alloff" , $leftFrame).on("click" ,function(){ $("#select input.checkbox", $rightFrame).prop("checked", false); $("#send" , $leftFrame).prop('disabled',true); }); }); }); </script>

投稿2017/01/10 06:15

namimon

総合スコア726

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

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

thanatos04050jk

2017/01/12 06:53

他業務との兼ね合いもあり検証が遅くなってしまい申し訳ありませんでした。 教えて頂いた方法でうまくいきました。 ありがとうございました。
guest

0

left.htmlのhtml部分はどうなってますか?
またleft.htmlのjavascriptとなっていますが、
id=mainはあくまでもparent.htmlの中のidでは?

#追記
left.htmlのjavasriptに以下追記してください

javascript

1 $(parent.main.document).on('click',function(){ 2 var flg=($(this).find('input[type=checkbox]:checked').length==0); 3 $("#send").prop('disabled',flg); 4 }); 5

投稿2017/01/10 02:28

編集2017/01/10 06:38
yambejp

総合スコア114505

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

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

yambejp

2017/01/10 06:39

sampleを追記しておきました
thanatos04050jk

2017/01/12 06:57

他業務との兼ね合いもあり検証が遅くなってしまい申し訳ありませんでした。 教えて頂いた方法でうまくいきました。 ありがとうございました。 ただ、お教えいただいておいて恐縮ですが、自分のレベルのソースの可読性の観点からベストアンサーはnamimon様とさせていただきました。 今後とも何かありましたらよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問