チェックボックスにチェックがついているときだけselectableを有効にしたい

SelectableとSortableを使用して複数選択が可能な並び替えの画面を作成しています。

現在のつくりでは、複数選択したものを並び替えできている状態ですが、
**チェックボックスを置き、チェックが入っているときのみ複数選択ができるようにする方法はないでしょうか。
**
Selectableにdisable()を設定してみたのですが、複数選択が無効になるのはよいのですが、
Sortableも効かなくなってしまいました(Sortableの処理に入ってこないようでした)。

jQuery
1$(function(){
2	/*--- 複数選択 ---------*/
3	$('.sortList').selectable({
4		/* 選択状態にしない要素 */
5		cancel: '.ui-selected ',
6		/* 選択可能になる子要素 */
7		filter: '> li',
8	});
9	
10	/*---リストの並び替え ---------*/
11	$('.ulCategory').sortable({
12		/* ドラッグ時に表示するカーソル */
13		cursor: 'move',
14		/* ドラッグ時に表示するヘルパー要素 */
15		helper: function(e, item){
16			if(!item.hasClass('ui-selected')){
17				item.parent().children('.ui-selected').removeClass('ui-selected');
18				item.addClass('ui-selected');
19			}
20			var selected = item.parent().children('.ui-selected').clone();
21			ph = item.outerHeight() * selected.length;
22			item.data('multidrag', selected).siblings('.ui-selected').remove();
23			return $('<tr/>').append(selected);
24		},
25		/* 付与したい要素 */
26		items: '> li',
27		/* ヘルパーの透明度 */
28		opacity: 0.9,
29		/* 入れ替わる重なり具合 */
30		tolerance:'pointer',
31		/* 並び替え処理停止時 */
32		stop: function(e, ui){
33			var selected = ui.item.data('multidrag');
34			ui.item.after(selected);
35			/* 元を削除 */
36			ui.item.remove();
37			/* 選択状態を解除 */
38			selected.removeClass('ui-selected');
39		}
40	});
41	
42});
43
44function chgMode(checked){
45	if(checked == true){
46		/* ここで複数選択を可能としたい */
47	}else{
48		/* ここで複数選択を不可としたい */
49	}
50}
51

HTML
1<input type="checkbox" name="ChgMode" onclick="chgMode(this.checked);" >複数選択する</input>
2
3<div class="listFrame">
4	<ul class="sortList ulCategory" id="ulCategory">
5		<li class='ui-state-default Category'>AAAA</li>
6		<li class='ui-state-default Category'>BBBB</li>
7		<li class='ui-state-default Category'>CCCC</li>
8		<li class='ui-state-default Category'>DDDD</li>
9		<li class='ui-state-default Category'>EEEE</li>
10		<li class='ui-state-default Category'>FFFF</li>
11		<li class='ui-state-default Category'>GGGG</li>
12	</ul>
13</div>
14

行動規範の内容に同意します

回答2件

自己解決

処理の追加として下記４点を行いました。
①複数選択ではないときのクラスを作成(仮にsoloModeとします)
②selectableのcanselに①のクラス(soloMode)を追加
③チェックのつけ/外しが行われたときに、リストにそのクラス(soloMode)をremoveClass/addClassする。
④チェックのつけ/外しが行われたときに、複数選択をenable/disableする。

また、なぜこの対応で動くのか、この対応で問題がないのかわかりませんが、
disableの時にsortableまで処理が動くようになった方法です。

「$(function(){});」内で記述していたものを各々functionにし、
「document.addEventListener("DOMContentLoaded", function(){});」内で
呼び出すことでdisable()が効くようになりました。

以下にソースを記載しておきます。
※実際に動いたソースから不要な処理(他の機能等)は抜かしています。ご了承ください。

document.addEventListener("DOMContentLoaded", function(){
  /* Selectable */
  selectableFunction();
  /* Sortable */
  sortaleFunction();
});

/* Selectable */
function selectableFunction(){
	$('.sortList').selectable({
		/* 選択状態にしない要素 */
		cancel: '.ui-selected, .soloMode',/* ←ここにClassを追加 */
		/* 選択可能になる子要素 */
		filter: '> li',
	});
}

/* Sortable */
function sortaleFunction(){
  $('.ulCategory').sortable({
    /* ドラッグ時に表示するカーソル */
    cursor: 'move',
    /* ドラッグ時に表示するヘルパー要素 */
    helper: function(e, item){
      if(!item.hasClass('ui-selected')){
        item.parent().children('.ui-selected').removeClass('ui-selected');
        item.addClass('ui-selected');
      }
      var selected = item.parent().children('.ui-selected').clone();
      ph = item.outerHeight() * selected.length;
      item.data('multidrag', selected).siblings('.ui-selected').remove();
      return $('<tr/>').append(selected);
    },
    /* 付与したい要素 */
    items: '> li',
    /* ヘルパーの透明度 */
    opacity: 0.9,
    /* 入れ替わる重なり具合 */
    tolerance:'pointer',
    /* 並び替え処理停止時 */
    stop: function(e, ui){
      var selected = ui.item.data('multidrag');
      ui.item.after(selected);
      /* 元を削除 */
      ui.item.remove();
      /* 選択状態を解除 */
      selected.removeClass('ui-selected');
    }
  });
}


function chgMode(checked){
  if(checked == true){
    $('.sortList').find('li').removeClass('soloMode');
    $('.sortList').selectable('enable');
  }else{
    $('.sortList').find('li').addClass('soloMode');
    $('.sortList').selectable('disable');
  }
}

投稿2020/05/29 06:40

Trainee2019

総合スコア11

selectableもsortableもdisable,enableで制御ができるようです

javascript
1  $('[name=ChgMode]').on('change',function(){
2    $('.sortList').selectable($(this).prop('checked')?'enable':'disable');
3  }).trigger('change');