Question

我的html看起来像这样

<form class="form-horizontal" role="form">
    <div class="form-group">
        <ul class="select_list">
            <li>Apple</li>
            <li>Peach</li>
            <li>Plum</li>
            <li>Banana</li>
            <li>Grapes</li>
            <li>Pear</li>
            <li>Kiwi</li>
        </ul>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

我的jQuery是这样的：

$(".select_list li").on('click',function(){
    $(this).toggleClass("chosen");
}

这个工作，如果单击列表项，它会添加一个类，但我想阻止选择3个以上。我怎样才能做到这一点？如果选择3，其他的应该淡出。用户应该能够取消选择三个中的一个，并像以前一样再次看到未选择的那个。我该怎么做？我需要选择号码，但我不知道如何

提前致谢

Answer 1

您可以使用$('.select_list li.chosen').length来访问所选元素的数量。检查点击的元素是否具有类chosen，以确保可以取消选择它。

EXAMPLE HERE

$(".select_list li").on('click',function(){
    if($('.select_list li.chosen').length < 3 || $(this).hasClass('chosen')){
        $(this).toggleClass('chosen');
    }
});

对于淡化部分，只需根据所选元素的数量在兄弟元素上使用fadeIn / fadeOut。

UPDATED EXAMPLE HERE

$(".select_list li").on('click',function(){
    if($('.select_list li.chosen').length < 3 || $(this).hasClass('chosen')){
        $(this).toggleClass('chosen');

        var chosen = $('.select_list li.chosen');
        var notChosen = $(this).siblings();
        if(chosen.length == 3){
            $(notChosen).not(chosen).fadeOut();
        } else {
            $(notChosen).fadeIn();
        }
    }
});

Bootstrap3限制选择和淡入淡出未选中

1 个答案: