javascript - 如何在按下按钮时停止 toggleClass()？

Question

我的页面上有 4 个 div 和一个按钮。如果您单击一个 div，它会切换类。

单击按钮时，我希望所有已突出显示的 div 保持突出显示状态，但我不希望在单击按钮后有更多的 div 切换类。

有办法吗？

我的代码是这样的:

function submit() {
//this is the function I do not know how to define
};

function choose() {
    $('.options').click(function() {
        $(this).toggleClass('highlighted');
    });
    return;
};

$(document).ready(function() {
    $('body').append('<div class="options">option1</div>');
    $('body').append('<div class="options">option2</div>');
    $('body').append('<div class="options">option3</div>');
    $('body').append('<div class="options">option4</div>');
    $('body').append('<button onclick=submit()>Submit</button>');
    choose();
});

我一直在寻找一种方法来停止 choose() 函数。创建变量 goOn 并在单击按钮时将其值更改为 false，再加上下面的代码没有帮助。

var goOn = true;
while (goOn) {
    choose();
};

Answer 1

用.off()解除点击事件的绑定(bind):

function submit() {
    $('.options').off('click')
};

jsFiddle example