javascript - jQuery点击切换事件

Question

我做了一个函数，当你点击它时选择一个项目。当我选择超过 10 个时，它会停止添加到 selectedItems。

But when 10 items is selected, I can still toggle the class d-items-selected by clicking.我该如何禁用它？我试过使用 stop() 但取消了漏洞，所以我无法再次“取消选择”这些项目。

$(document).ready(function(){
        $('.d-items').on('click', function(e){
            e.preventDefault();
            $(this).toggleClass('d-items-selected');
            var selectedItems = $('.d-items-selected').length;
            if(selectedItems > 10) {
                $('.d-items').finish();
            } else {
                $('#ItemsSelected').html(selectedItems);
            }
        });
    });

Answer 1

您可以禁用未选中的控件。像这样。

$(document).ready(function(){
        $('.d-items').on('click', function(e){
            e.preventDefault();
            $(this).toggleClass('d-items-selected');
            var selectedItems = $('.d-items-selected').length;
            if(selectedItems > 10) {
                //do not allow to select
                $(this).removeClass('d-items-selected');
            } else {
                $('#ItemsSelected').html(selectedItems);
            }
        });
    });