jQuery on click toggle event

Question

I've made a function which selects an item when you click on it. And made it so when I've selected more than 10, it stops adding to selectedItems.

But when 10 items is selected, I can still toggle the class d-items-selected by clicking. How do I disable that? I've tried to use stop() but that canceled the hole thing, so I couldn't 'de-select' the items again.

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

off-topic to this question, but I was responding to your now-deleted question with: @zerovacpls as I stated earlier about the session array most likely to have not been destroyed (session_destroy();) and is keeping it in cache/same session. If you destroy the session array and try again, I'm betting it will work. I've seen that happen often before. You should also add an exit; after your header as your code may want to continue to execute further down. You also need to check if the session was started inside all other files using those (sessions). This might even be a caching issue. — Funk Forty Niner
– Funk Forty Niner, Commented Sep 18, 2016 at 14:06
...you never said why you deleted your question and if you did find the problem; was it what I mentioned about the session array still being in memory? this being for your deleted question stackoverflow.com/q/39558222 - this is a "need to know" question. — Funk Forty Niner
– Funk Forty Niner, Commented Sep 18, 2016 at 14:07
I'm gonna try that - thank you. I deleted my question, because it was badly written. And for that I'm sorry. — zero vacpls
– zero vacpls, Commented Sep 18, 2016 at 14:11
@zerovacpls You're welcome. If what I mentioned for you to try worked, let me know (ping me directly). You could then reopen your question and I'll post an answer for it along with some more information to improve on it. — Funk Forty Niner
– Funk Forty Niner, Commented Sep 18, 2016 at 14:22

Alex Kudryashev · Accepted Answer · 2016-07-07 22:31:41Z

2

You can disable controls which are not selected. Something like this.

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

edited Jul 7, 2016 at 22:31

answered Jul 7, 2016 at 18:59

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zero vacpls Over a year ago

Sorry but this can select more than 10 items + it only counts to 9 when i select 10 of them

zero vacpls Over a year ago

Thanks in advanced!

fyrb · Accepted Answer · 2016-07-07 18:27:42Z

0

Would unbinding the click event work for you?

e.g.

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

Otherwise you can rebind it to a different function after selectedItems > 10, or anything really.

edit: It would help if you clarified what exactly you want to happen on click after selectedItems > 10

answered Jul 7, 2016 at 18:27

fyrb

715 bronze badges

1 Comment

zero vacpls Over a year ago

Nothing. When you already have selected 10 items, you should not be able to select more. But still be able to deselect an item

edvilme · Accepted Answer · 2016-07-07 18:30:03Z

0

Maybe try e.stopPropagation() or e.stopImmediatePropagation()

answered Jul 7, 2016 at 18:30

edvilme

5887 silver badges16 bronze badges

Comments

gaetanoM · Accepted Answer · 2016-07-07 18:57:17Z

0

I tried to figured out a solution:

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

edited Jul 7, 2016 at 18:57

answered Jul 7, 2016 at 18:28

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

5 Comments

zero vacpls Over a year ago

When I select an item now, it says '0' then when I deselect it, it says 1 item selected..

zero vacpls Over a year ago

My items arent checkboxes. It looks like this: gyazo.com/dc50220519aca321a2aace14036e7d8b So I do not understand your suggestion.

zero vacpls Over a year ago

Hmm, when you click on an item now, it doesnt add 1 to 'items selected(top of the page)' but then when you select a second item it goes to 1. So if I select 2 items it says 1. and if i select 2 items and then deselect 1 of them it goes to 3. That's not how its supposed to do. If you have steam you can login the site and see it yourself. It's a bit hard to explain what it does.

gaetanoM Over a year ago

Sorry, I only wrote a last update. If it could help ok. Thanks so much 😊

zero vacpls Over a year ago

80.167.90.224/csgodeadly/deposit.php thats the link to the site. You just sign in through steam and then go to the deposit site :) I hope you have counterstrike, else this will not help

user3395464 · Accepted Answer · 2016-07-09 17:30:41Z

0

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

answered Jul 9, 2016 at 17:30

user3395464

1

1 Comment

HiDeoo Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

jQuery on click toggle event

5 Answers 5

2 Comments

1 Comment

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related