使用Jquery禁用和启用Click事件

Disable and Enable Click event using Jquery

本文关键字：启用 Click 事件 Jquery 使用      更新时间：2023-09-26

您能建议如何使用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);  }
          );
    }

如果要不断删除和添加事件，我会将单击功能移动到可以重用的函数中。

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引用它。

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

禁用Twitter中按钮的最佳方式'；s引导

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");
       }
      );
    }
相关文章：