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

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块之后添加一个块。以下代码适用于这种方法：ifchange

var 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复选框的侦听器（是的！只需将其删除即可！）