Disable and Enable Click event using Jquery

Question

Could you please advise how to disable /enable the click function using jquery api. Based on the role i have show the sports page to the user.

Using below bootstrap code for 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>

I am using below function to handle the above buttons click events.

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

For some criteria , i am disabling the click event using below function

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

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

Please advise how to enable the click event? or how to bind the click function for button.

I am using below method ,bind the click event for the specify buttons based on given advise . but it's not working.

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

    }

score 2 · Answer 1 · answered Nov 23 '15 at 18:56

2

If you are going to continually remove and add the event I would move the click functionality to a function you can reuse.

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

Then you can attach it like so:

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

And remove it like so:

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

As for the disabling loop if mybuttons is a list of elements you can just do this:

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

You can because of how jQuery calls the function you pass it to each. It sets the context of that function for every element so you can just reference it using this.

answered Nov 23 '15 at 18:56

AtheistP3ace

9,611
12
43
43

Thanks for your suggestion, can we do without function ? – Vasanth Nov 23 '15 at 19:05
Sure you can continually use an anonymous function if you want. – AtheistP3ace Nov 23 '15 at 19:12
Do we need pass the current object ie this() to myOnclick function ? – Vasanth Nov 23 '15 at 19:14
`this` is the context of the function, you don't need to pass it. It's just there and in your case references the element that was clicked. – AtheistP3ace Nov 23 '15 at 19:16
Using your suggestion ,we can disable the click event for the all button and vice versa,but my requirement is enable/disable the event based on the conditions, so that i am using off method in the loop. – Vasanth Nov 23 '15 at 19:25
The given below code used to disable the click event for Cricket/Tennis .var disableOptionsTabs=["C","T"]; disableButtons(disableOptionsTabs); – Vasanth Nov 23 '15 at 19:27
Yes, I gave you an example on how to disable the 'click' event. Then I also showed you how to properly use your disableButtons method to disable buttons that are in the list you pass it. Did you read the entire answer? – AtheistP3ace Nov 23 '15 at 19:27
Ah see there is some code you didn't include. As I said in my answer if that list was actual DOM elements loop using this. Since those are just strings which I assume are referencing IDs than go back to your old loop using $('#' + value).off('click') – AtheistP3ace Nov 23 '15 at 19:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95959/discussion-between-vasanth-dha-and-atheistp3ace). – Vasanth Nov 23 '15 at 19:48
Stil i am facing the same issue – Vasanth Nov 23 '15 at 19:55

score 0 · Answer 2 · edited May 23 '17 at 12:23

I got answer from the below link ,

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");

       }
      );

    }

Disable and Enable Click event using Jquery

2 Answers2