Question

I have several divs with a click function that essentially “votes” for your chosen box.

This works great until someone wants to choose a second or third box as well. The click function is tied to the class of the divs so I somehow need to disable the click function after it’s clicked once.

$('.vote').on('click',function(){
    $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
});

<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

I have to use the “one” function to disable the click function on the current div so that a user can click the form input. The problem is that the other options are still “clickable”. So a user can vote for all three options if they like. How can I limit this to one vote?

Answer 1

classes should not start with a period :

<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

Use a flag to make the entire class clickable only once :

var flag = true;

$('.vote').one('click',function(){
    if (flag) {
        $(this).append('<div id="vote">Thanks!<form><input type="text" name="comment"></form></div>');
        flag = false;
    }
});

FIDDLE