使用 Jquery 禁用和启用 Click 事件答案

【问题标题】：Disable and Enable Click event using Jquery使用 Jquery 禁用和启用 Click 事件
【发布时间】：2016-02-25 23:54:17
【问题描述】：

能否请您告知如何使用 jquery api 禁用/启用点击功能。根据我的角色，我向用户展示了体育页面。

使用下面的 UI 引导代码。

<div id="viewtest" class="btn-group btn-group-sm">
    <button id="C" class="btn btn-default" title="Cricket">Cricket</button>
    <button id="B" class="btn btn-default" autofocus="autofocus" autofocus title="BaseBall">BaseBall</button>
    <button id="T" class="btn btn-default disabled" title="Tennis">Tennis</button>
    <button id="G" class="btn btn-default disabled " title="Monthly">Golf</button>
</div>

我正在使用下面的函数来处理上面的按钮点击事件。

$(".btn-group > .btn").click(function () {
    $(this).addClass("btn-primary").siblings().removeClass("btn-primary");
    viewtype = this.id;
    $(this).blur();
    showPage();
});

对于某些条件，我正在使用以下函数禁用点击事件

var disableOptionsTabs=["C","T"];
        disableButtons(disableOptionsTabs);

function disableButtons(mybuttons) {
    $.each(mybuttons, function (key, value) {
        $("#" + value).off();
    });
}

请告知如何启用点击事件？或者如何绑定按钮的点击功能。

我正在使用下面的方法，根据给定的建议绑定指定按钮的单击事件。但它不起作用。

 var enableOptionsTabs=["C","T"];
            enableButtons(enableOptionsTabs);
    function enableButtons(mybuttons){
           $.each( mybuttons, function( key,value ) 
           { $( "#" + value ).on("click",myOnClick);  }
          );

    }

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

如果您要不断删除和添加事件，我会将点击功能移至您可以重复使用的功能。

function myOnClick () {
    $(this).addClass("btn-primary").siblings().removeClass("btn-primary");
    viewtype = this.id;
    $(this).blur();
    showPage();
}

然后你可以像这样附加它：

$(".btn-group > .btn").on('click', myOnClick);

然后像这样删除它：

$(".btn-group > .btn").off('click');

至于禁用循环，如果mybuttons 是元素列表，您可以这样做：

function disableButtons(mybuttons) {
    $.each(mybuttons, function () {
        $(this).off('click');
    });
}

您可以通过 jQuery 调用函数的方式将其传递给 each。它为每个元素设置该函数的上下文，因此您可以使用this 引用它。

【讨论】：

感谢您的建议，我们可以不使用功能吗？
当然，如果你愿意，你可以继续使用匿名函数。
我们是否需要将当前对象，即 this() 传递给 myOnclick 函数？
this 是函数的上下文，不需要传递。它就在那里，在您的情况下引用被点击的元素。
使用您的建议，我们可以禁用所有按钮的单击事件，反之亦然，但我的要求是根据条件启用/禁用事件，因此我在循环中使用 off 方法.

【解决方案2】：

我从下面的链接得到答案，

Best way to disable button in Twitter's Bootstrap

function disableButtons(mybuttons){
             $.each( mybuttons, function( key,value ) 
      {         $("#" + value).prop('disabled', true)     }
      );

    }
    function enableButtons(mybuttons){
       $.each( mybuttons, function( key,value ) 
       { 

       $("#" + value).prop('disabled', false);
       $("#" + value).removeClass("disabled");

       }
      );

    }

【讨论】：