Question

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

但是当选择了10个项目时，我仍然可以通过点击切换课程d-items-selected。我如何禁用它？我试图使用stop()但是取消了这个漏洞，所以我无法取消选择＆＃39;这些物品。

$(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);
            }
        });
    });

Answer 2

取消绑定点击事件会对你有用吗？

e.g。

if(selectedItems > 10) {
  $('.d-items').unbind("click");
}

否则，您可以在selectedItems > 10之后将其重新绑定到其他功能，或者其他任何功能。

编辑：如果您在selectedItems > 10

之后明确了想要发生的事情，那将会有所帮助

Answer 3

我试图想出一个解决方案：

$(function () {
  $('.d-items').on('click', function(e) {
    e.preventDefault();
    var selectedItems = $('.d-items-selected').length;

    //if selected items are less then 10
    // or the current item is already selected you can deselect
    if (selectedItems<10 || (selectedItems>=10 && $(this).is('.d-items-selected'))) {
      $(this).toggleClass('d-items-selected');
    }
    if (selectedItems > 10) {
      $('.d-items').finish();
    } else {
      $('#ItemsSelected').html(selectedItems);
    }
  });
});

Answer 4

也许试试 e.stopPropagation（）或 e.stopImmediatePropagation（）

Answer 5

$(document).ready(function(){
            var i=0;
            $('.d-items').on('click', function(e){
                e.preventDefault(); 

                if($(this).hasClass('d-items-selected')) {
                    $(this).removeClass('d-items-selected');
                    i--;
                    console.log("deleted"+i);
                }
                else {
                    if(i<10) {
                        $(this).addClass('d-items-selected');
                        i++;
                        console.log("added"+i);
                    }
                }
            })
});

jQuery点击切换事件

5 个答案: