![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
シャドウボックス3.0.3を利用しています。
チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、
シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。
共存させるにはどのように記述を変えれば良いでしょうか?
<head>
<script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script>
<!-- シャドウボックス -->
<script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css">
<script type="text/javascript">
$(document).ready(function(){
Shadowbox.init();
});
</script>
<!-- チェックボックスの複数選択 -->
<script type="text/javascript">
$(function(){
$("#toggle").click(function(){
$('.chkbox').attr('checked', $(this).attr('checked'));
});
});
</script>
</head>
<body>
<a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a>
<div id="inline" style="display:none">
<input type="checkbox" id="toggle"> toggle<br>
<br>
<input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br>
<input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br>
<input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br>
</div>
</body>
No.1ベストアンサー
- 回答日時:
shadowboxってこれでしょうか?
http://shadowbox-js.com/
ちゃんとみてませんが、フレームワークを選択できるようになっているのみたいなので、jquery版を利用すればコンフリクトはおこらないと思いますが…? (ご質問文にないものを他に何か使っているのでしょうか?)
(試しに、jquery版でinlineHTMLのものをDLするとエラーで動作しなかったので、以下はstandalone版でテストしました)
>シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。
上記のようにコンフリクトを避けていれば、動作はしているはずですが、ご提示の例だと動作しているようには見えないと思います。
理由は、shadowboxが表示しているのは、もともとHTMLに記述されている要素ではなく表示用のレイヤーに都度コピー生成されたソースだからです。
それなので、最初に設定したイベントはそのまま有効ですが、実際に表示している要素には設定されていないことになります。
(display:noneを消してみれば、動作していることが確認できることでしょう)
表示中に同じidの要素がコピーされているので一時的に文法違反になってしまいますが、それは置いておくとして、ご希望のように動作するためには、jqueryのliveでイベントを設定するか、または、documentなどにイベントを設定しておいて都度判断をするかということになるでしょう。
◇後者の例
$(document).ready(function(){
Shadowbox.init(); //shadowboxの設定
$(document).click(function(evt){
var t = $(evt.target);
if(t.attr("id")=="toggle")
$('#toggle, .chkbox').attr('checked', t.attr('checked'));
});
});
2つ存在するidで要素を特定しているのがとても気持ち悪いですが、とりあえず見かけ上は動作するようになります。(スクリプトでの処理はdisplay:noneの要素にも反映されます)
但し、個々のチェックボックス(toggleでないinput要素)をクリックした際の状態は元の要素には反映されませんので、shadowboxの表示を消すとその状態はどこにも残りません。
さらには、shadowboxは表示のために要素を生成する際に、チェックボックスのチェック状態まではコピーしてくれないようですので、元のソースに動的にチェックが入っていてもそれは無視されてしまい、表示する度に常に初期状となり、チェックの状態が保持されているようには見えないでしょう。
もしも、これらを解消しようとするのであれば、一時的に表示されるshdowboxの状態を常に元のHTMLに反映しておくようにするのがよろしいかと思われます。
幸いにも、shaowboxではいろいろなイベントフックが可能なようになっているようですので、
onFinishで元ソースからチェック状態をコピーし
onCloseでshadowboxの表示要素からチェック状態を元の要素にコピー
みたいなことで可能になると思われます。
http://shadowbox-js.com/options.html
HTML全体がどうなっているか不明ですが、shadowboxでの表示対象が他にもある場合は、上記の処理を無条件で行なうわけにはいかないので、対象となるid="toggle"のときだけ処理されるようにする必要があるでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptとjuaryを同時に
-
jquery を追加したら動作しな...
-
lightbox2 表示の不具合
-
スライド写真で2、3枚目をラ...
-
CrossSlideのスライドショーが...
-
IEのセキュリティにブロックさ...
-
複数のjavascriptを使うと動か...
-
シャドウボックスとjQueryを共...
-
<a href="#" …>の意味を教えて...
-
UAによるリダイレクト
-
外部読み込みで動かないときの...
-
Cookieの回数で閲覧制限、javas...
-
他のページ更新
-
フレーム分割領域のサイズを変...
-
色の指定で配列を使いたい
-
DOMで生成したタグにCSSが適用...
-
セレクトメニューでリンクの際...
-
小ウインドウのスクロールバー
-
javascriptでalertの文字列をコ...
-
CGIフォーム一定時間過ぎる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
シャドウボックスとjQueryを共...
-
CrossSlideのスライドショーが...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
DreamWeaverでJS
-
ebayの返信で『 Message may no...
-
htmlで別ファイルのjavascript...
-
パソコンでホームページを作成...
-
document.lastChild.appendChil...
-
Javascriptの外部サーバーから...
-
jQueryのfilterについて
-
同一HTML内に複数のjQueryを作...
-
サイトにアクセスした際、数秒...
-
マウスオーバー+クリカブルマッ...
-
jqeryのslicksliderのパスにつ...
おすすめ情報