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

    }

AtheistP3ace · Accepted Answer · 2015-11-23 18:56:48Z

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, 2015 at 18:56

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Vasanth Over a year ago

Thanks for your suggestion, can we do without function ?

AtheistP3ace Over a year ago

Sure you can continually use an anonymous function if you want.

Vasanth Over a year ago

Do we need pass the current object ie this() to myOnclick function ?

AtheistP3ace Over a year ago

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.

Vasanth Over a year ago

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.

|

Community · Accepted Answer · 2017-05-23 12:23:40Z

0

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

       }
      );

    }

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Nov 24, 2015 at 4:08

Vasanth

4943 gold badges14 silver badges36 bronze badges

Collectives™ on Stack Overflow

Disable and Enable Click event using Jquery

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related