如何在选中/取消选中复选框时切换（打开/关闭）行为？

Question

伙计们。我有一个无法解决的问题。我需要使用“.on/.off”方法切换行为，当我从复选框中设置或删除勾选时，这些方法将起作用。我怎样才能做到这一点？

例如：我有一个按钮，可以通过按下它来放大/改变颜色/移动。但是，当我在复选框之一上设置勾号时，我需要使用“.off”方法从按钮禁用此事件。

我试过

$(".button").on('click', function(){           

  $(this).toggleClass('active');

});

$(".button2").on('click', function(){

  $(this).toggleClass('active2');

});

$(".button3").on('click', function(){

  $(this).toggleClass('active3');

});

$(".button4").on('click', function(){

  $(this).toggleClass('active4');

});

var check = $("#check");

check.change(function(){

  if ($(this).is(':checked'))

  {

      $('.button').off('click');

  }

});

但由于某种原因，它会禁用我的事件，直到我刷新页面，即使我从我的复选框之一中删除了勾号

提前致谢。

Answer 1

发生这种情况是因为当您勾选复选框时，您的代码将从.button元素中删除点击侦听器，并且在未选中复选框时您不会将其设置回原处。因此，如果您希望在.button取消选中复选框时再次触发元素上的点击侦听器，您可以执行下面提到的两件事中的任何一件。首先，您可以在复选框的侦听器中的else块之后添加一个块。以下代码适用于这种方法：ifchangevar check = $("#check");check.change(function(){    if ($(this).is(':checked')) {         // This will remove the click listener from the button if checkbox is checked        $('.button').off('click');    }     else {         // This will again add the click listener to the button if checkbox is not checked         $(".button").on('click', function(){              $(this).toggleClass('active');          });    }});但我不会推荐上述方法，因为它会不必要地增加代码的大小。这是第二种和更好的方法。在点击事件处理函数中，您可以添加一个if语句来检查复选框是否被勾选。下面是相同的代码：$(".button").on('click', function(){     if (! $("#check").is(':checked')) {         // This will only be fired if checkbox is not checked        $(this).toggleClass('active')    }});您可以根据需要将此 if 添加到任何其他块。使用上述代码的主要优点是：与第一种方法相比，代码不会增加您不需要change复选框的侦听器（是的！只需将其删除即可！）