質問するログイン新規登録

回答編集履歴

2

チェックで解除

2018/04/03 06:23

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -33,4 +33,23 @@
33
33
  }
34
34
  });
35
35
  })
36
+ ```
37
+
38
+ # チェック外したら解除
39
+
40
+ draggableのオプションに「draggableを無効にする」があるのでチェックされたときにfalse、チェックはずれたときにtrue すれば可能です。
41
+ - [draggable](http://jqui.my-learn.net/draggable/options.php)
42
+
43
+ 当該プラグインは内部的にはjQuery-UIのdraggable()の機能を利用しているので同じオプションが指定可能です。
44
+
45
+ ```javascript
46
+ $(function(){
47
+ $('#check').on('change', function(){
48
+ if ($(this).is(':checked')) {
49
+ $('#widget').draggable({disabled:false});
50
+ }else{
51
+ $('#widget').draggable({disabled:true});
52
+ }
53
+ });
54
+ })
36
55
  ```

1

動くサンプル

2018/04/03 06:23

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -10,4 +10,27 @@
10
10
  }else{
11
11
  //解除 (ここは調べてください)
12
12
  }
13
+ ```
14
+
15
+
16
+ # ミニマムサンプル
17
+
18
+ 下記コードで動作確認とれました。(解除部分は書いてません)
19
+ 参考にしてください。
20
+ ```html
21
+ <input type="checkbox" id="check" name="check">
22
+ <div id="widget">draggable</div>
23
+ <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
24
+ <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
25
+ <script src="jquery.ui.touch-punch.min.js"></script>
26
+ ```
27
+
28
+ ```javascript
29
+ $(function(){
30
+ $('#check').on('change', function(){
31
+ if ($(this).is(':checked')) {
32
+ $('#widget').draggable();
33
+ }
34
+ });
35
+ })
13
36
  ```