チェックがあるときだけ、特定のファイルを無効にする方法

Question

###やりたいこと
jqueryのライブラリの読み込み（または実行）を、チェックの有無で切り分けたいです。

チェックボックスにチェックがあるときだけ、このライブラリを作動するようにしたいのです。

逆に、チェックがないときはこれを全て無効にしたいです。

そのような方法はありますでしょうか？

###ためしたこと

たとえば$.getScriptとすると、ライブラリを後から読み込むことができるようです。

けれど、これを利用して次のようにチェックの有無で後から読み込んでみてもダメなのです。

なぜならこれは、「library.js を１回ざっと実行してくれるだけ」であって、「library.js をいつもで実行できる状態にしてくれる」わけではないからです。

$('#ckb').change(function(){
	if ($(this).is(':checked')) {
		$.getScript("http://example.com/js/library.js");
	} else {
		//チェックなしなら読まなくてOKだよ
	}
});

このような１回だけでなく、チェックが入っている限り、何度でも、たとえばボタンをクリックしたときのイベントが何度でも起こるような、そのくにせ、チェックがはずれたらもうそのイベントが起こらなくなるような、、そんな方法を探しています。

ご存じの方がもしいらっしゃいましたらご教示いただけませんでしょうか？よろしくお願いいたします。

Comments

[m.ts10806]

あれ？前回の質問で理解できたということだったのですが、このコードではその質問の前の状態の理解度に戻ってますよ？

[m.ts10806]

ご自身で「ちょっとこの後だしっぷりはヒドすぎましたね。」と仰っていましたが、前回の質問と提示レベルが変わっておらず、結局「ｈｔｍｌ提示してください」「何のライブラリでしょうか？」という同じレベルの情報提供依頼が来ることになります。「解除部分は調べてください」とコメントしたはずですが、その辺りはどうなったのでしょうか・・？

[退会済みユーザー]

はい、仰ること、わかります。実は前回の質問ですが、「スマホの場合でだけチェックボックスを出しておいて、チェックが入ったら jquery.ui.touch-punch を実行したい。というのが本来の目的だったのです（ってまたそんな後から…笑）。けれど前回のケースだと、スマホでもPCでもとにかくチェックがなければjquery UI sortable の .draggable が実行されない。ということになってしまうようなので、今回、改めて本来の目的に沿った形での質問をさせていただいた。という次第です。ちなみに、「それならチェックの有無の条件分岐の前に、スマホか否かの条件分岐をつければいいでしょ」とお叱りを受けるかもしれません。が、実は次のような事情がございまして笑。私が書いていた.draggable を実行させる関数がとても複雑で、チェックの有無の条件分岐で囲むと、おかしな挙動を起こしてしまったのです。つまりチェックの有無の条件分岐を、.draggable の実行には使うことができない。と、以上のような事情によって、「質問の前の状態の理解度」に戻りまして、「.draggable の実行」ではなく「ライブラリの読み込み」という形で、改めて質問を立てさせていただいたわけなのです。（だからどうしたぁ~！ですよね。笑）

[退会済みユーザー]

15:03を今読みました。今回の質問ではHTMLとかライブラリの中身ははぶいていいかな。と思っておりました。とにかく「チェックの有無でファイルの読み込みを区別する方法」を求めての質問です。

[Lhankor_Mhy]

できないと思っておいたほうが無難です。

[m.ts10806]

前の質問の回答に移行します。

[m.ts10806]

前の質問の回答に移行します。

[m.ts10806]

こちらでは要件が違うので前の質問の回答に追記しておきますね。

[退会済みユーザー]

Lhankor_Mhyさん、ありがとうございます。無難な人生を歩んできたので、たまには冒険もいいかも♪なんて。（意味不明ｗ）笑

[m.ts10806]

いずれにしても無理やり実装して難しい方向に走っていくよりも、「おかしな挙動を起こしてしまった」コードを正す方が近道に思います。「できなかった、じゃ、やめよう」だと勿体無いですね。すぐ傍に答えが転がってるかもしれないのに。

[m.ts10806]

後出しが多すぎるのは良くありません。前提が崩れてしまうと回答も１８０度変わってしまうことがありえます。つまり、回答者への負担が増えるので、matsuzakaqさんに対して「めんどくさい」と感じる回答者が増え、回答がだんだんつかなくなります。（これまでの質問履歴の感じから、そういう回答者は既に少なくなさそうです）

[sousuke]

横からで失礼しますが「おかしな挙動を起こしてしまった」理由を知るべきだと思います。それを知ろうとせずになぜか回り道してさらにつまずいて質問をするから意味不明な質問になってしまうんですよ。

[Lhankor_Mhy]

そのライブラリに動作停止する機能が存在すれば、その範囲において可能です。そうでないならば、個別にライブラリに動作停止用のコードを書かなければなりません。全てのライブラリに共通するやり方はありませんので、まずは動作を停止したいライブラリが何であるのかを提示した方がよいでしょう。

[m.ts10806]

前の質問の回答に動作解除・再開するコード（動作検証済み）も追記しておきました。　https://teratail.com/questions/120127

[退会済みユーザー]

sousukeさん、仰るとおりすぎます。知ろうとするにも、難しすぎるんですもの。。でも、これからはもうちょっとだけ頑張ってみます。ちょっとだけ。

[退会済みユーザー]

Lhankor_Mhyさん、全てで共通するものがあるかと勝手に思い込んでおりました。情報の不備についての理由とご指摘、まことにありがとうございます。気を付けます。

Answer 1

「PCのときはライブラリ使わせたくない」のであればPCかそれ以外かの判定を入れておき
そのライブラリの機能を使わなければいいだけだと思います。チェックボックスは不要です。
ライブラリのjsファイルを読み込んだだけでは何も実行されません。

本当に読み込みさえさせたくないのなら
当質問には「PHP」をタグに入れてあるのでPHPを利用されるようですし、
PHP側で判定してPCのときに<script src>を出力しなければ良いだけでは？
もちろんライブラリの機能を呼び出しているところも除外しておく必要があります。

Comments

[退会済みユーザー]

ありがとうございます。

>「PCのときはライブラリ使わせたくない」のであればPCかそれ以外かの判定を入れておきそのライブラリの機能を使わなければいいだけだと思います。

あっとですね、次のような考えです。

■PC→常に使いたい
■スマホ→チェック有なら使いたい

なぜかというと、スマホの場合は他のライブラリとぶつかってしまうからです。

なので、「ライブラリA」を使うならチェックを外して、「ライブラリB」を使うならチェックを入れてね。という選択をユーザーにゆだねようかなと思っておりました。

---

>PHP側で判定してPCのときに<script src>を出力しなければ良いだけでは？

上述したとおりですが、ユーザーが選択できたらいいなと思っていたので、一括して出力しないというのは、ちょっと今は考えていない状況です。

[m.ts10806]

「質問への追記・修正、ベストアンサー選択の依頼」に書かれたことも踏まえて
要件を質問に追記しておいてください。

他のライブラリとぶつかってしまうのであれば「無効」しか選択肢はないのでは？
「有効」にすることでぶつかってしまって正常動作しない可能性があるということですよね。
（前の回答で動作しないといただきましたが、もしかしたら既にぶつかってしまっているのでは）

もちろん双方に機能呼出し後に動作を解除するような設定がついていればできないことはないですが、
解除・再開を何度も繰り返すUIはお世辞にも賢明とは言えません。どちらかのみに統一すべきです。

Answer 2

直接的な回答はわからないですが、そのライブラリは読み込まれたら即実行というものなのでしょうか。
もしよろしければライブラリ名を教えていただけると幸いです。

読み込んだ関数を実行するタイプのライブラリなら

$.getScript("http://example.com/js/library.js");
$('#ckb').change(function(){
    if ($(this).is(':checked')) {
        hogefunction_in_lib();
    } else {
        //チェックなしなら読まなくてOKだよ
    }
})

で良いのではないでしょうか。

Comments

[退会済みユーザー]

$.getScriptは非同期処理となるので、単体テスト（もしくは超人的な速度での操作）の際、スクリプトを読み込み中に#ckbのchnageイベントが発火させることが出来るため、正しく動作しない恐れがあります。
$.getScriptのcallback内でchangeイベントの定義する必要があるかと。
https://api.jquery.com/jquery.getscript/

[退会済みユーザー]

なるほど、ありがとうございます。
ではpromise使うとかでいけますかね。

[退会済みユーザー]

前コメにも書きましたが$.getScriptのコールバックに記述する方が手っ取り早いです。もちろん、promiseを使用しても何ら問題ありません。