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