我有一个包含不同元素的列表.我希望所有人都可以选择,但只能在小组中.喜欢：
<ul> <li rel="group1">Item 1</li> <li rel="group1">Item 2</li> <li rel="group2">Item 3</li> <li rel="group2">Item 4</li> <li rel="group3">Item 5</li> <li rel="group3">Item 6</li> </ul>
我写了一些可以工作的东西,但是如果当前的元素rel属性与首先选择的不同,我不知道如何取消当前选择.
var selected = null;
$( "#selectable" ).selectable({
selecting: function(event,ui) {
if (!selected)
selected = $(ui.selecting).attr('rel');
if (selected != $(ui.selecting).attr('rel')){
// cancel this selection
}
}
});
解决方法
您可以使用
filter选项仅启用某些列表项.
我为你准备了这个DEMO,过滤器只有一个问题.从选择处理程序中更改启用的项目时,它不起作用.所以我在stop处理程序中添加了一些修复,在那里我删除了未启用的项目中的选择.
您的脚本可能如下所示：
var locked = false;
function enableAll() {
$('li').addClass('enabled');
locked = false;
}
$("#selectable").selectable({
// allow only enabled items to be selected
filter: '.enabled',selecting: function(event,ui) {
if (!locked) {
var group = $(ui.selecting).attr('rel');
// disable all items belonging to other groups
$("#selectable li[rel!='" + group + "']").removeClass('enabled');
locked = true;
}
},stop: function() {
// this fixes selectable behavior
// (it ignores dynamically added filter while selecting)
$(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');
// if no item is selected,then enable all groups
if($(this).find('.ui-selected').length == 0) {
enableAll();
};
}
});
// initialize
enableAll();
