Question

我列出了一些元素：

<ul class="ui-selectable">
<li data-id=100.100></li>
<li data-id=101.100></li>
<li data-id=102.100></li>
<li data-id=103.100></li>
...

http://jsfiddle.net/6KNRc/24/

此时你有机会选择不止一个听众。

如何改变这一点，所以你只能选择一个听众？问候！

Answer 1

试

$('.ui-selectable :not([data-id=""])').click(function() {
    if($('.ui-selectable .selected').length == 0 || $(this).hasClass('selected')){
        $(this).toggleClass('selected');
        $(this).parent().trigger('update');
    }
});

http://jsfiddle.net/6KNRc/26/

Answer 2

添加

    $('.ui-selectable .selected:not([data-id=""])').removeClass('selected');

点击您的点击功能http://jsfiddle.net/sirtimid/6KNRc/28/

Answer 3

~~您可以通过检查li items是否有selected课程来轻松实现。~~

~~if（！$（'。ui-selectable：not（[data-id =“”]）'）。hasClass（'selected'）） { //你的代码 }~~

DEMO

我最初被误解了你的需要，我想你想要选择的黑色元素只能在那个li系列中出现一次。然后请尝试demo。

$('.ui-selectable :not([data-id=""])').click(function() {
    $('.ui-selectable :not([data-id=""])').removeClass('selected');
    $(this).toggleClass('selected');
    $(this).parent().trigger('update');      
});

Answer 4

尝试：

$('.ui-selectable :not([data-id=""])').click(function () {
    if ($('.selected').not(this).length>0) return
    $(this).toggleClass('selected');
    $(this).parent().trigger('update');
});

演示：http://jsfiddle.net/qcWhL/

Answer 5

<ul class="ui-selectable active">  //add class active

并将脚本更改为

$('.ui-selectable :not([data-id=""])').click(function (e) {
if ($(e.target).parent().hasClass('active')) {
    $(this).toggleClass('selected');
    $(this).parent().trigger('update');
    $(e.target).parent().removeClass('active').addClass('deactive')
} 

else {
$(e.target).parent().children('li.selected').removeClass('selected')
    $(e.target).parent().removeClass('deactive').addClass('active')
    $(e.target).trigger('click')
}
});

DEMO

使css只有一个元素可选

5 个答案:

DEMO