JQuery callbacks.disable() method

This callbacks.disable() method in JQuery is used to disable a callback list from doing any other operation further. This method returns the Callbacks object onto which it is attached (this)
Syntax:

callbacks.disable()

There are two examples discussed below:

Example: This example disables the callback after adding and firing a function.

<!DOCTYPE HTML>  

<html>   

<head>  

    <title>  

      JQuery | callbacks.disable() method 

    </title> 

    <script src= 

"https://code.jquery.com/jquery-3.5.0.js"></script>  

</head>    

<body style="text-align:center;"> 

    <h1 style="color:green;">   

        GeeksForGeeks   

    </h1>  

    <p id="GFG_UP">  

    </p> 

    <button onclick = "Geeks();"> 

    click here 

    </button> 

    <p id="GFG_DOWN">  

    </p>        

    <script>  

        var el_up = document.getElementById("GFG_UP"); 

        var el_down = document.getElementById("GFG_DOWN"); 

        el_up.innerHTML = "JQuery | callbacks.disable() method"; 

        var res = ""; 

        function Geeks() { 

            // first function to be added to the list 

            var fun1 = function(val) { 

              res = res +  

"This is function 1 and value passed is " + val + "<br>"; 

            };   

            // second function to  be added to the list 

            var fun2 = function(val) { 

              res = res +  

"This is function 2 and value passed is" + val + "<br>"; 

            }; 

            var callbacks = jQuery.Callbacks(); 

            callbacks.add(fun1); // adding the function 1 

            callbacks.fire("GFG_1"); // calling the function 1 

            callbacks.disable(); /*disables further calls  

                                   to a callback list*/ 

            callbacks.add(fun2); // This will not work. 

            callbacks.fire("GFG_2"); // This will not work. 

            el_down.innerHTML = res; 

        }  

    </script>  

</body>    

</html>

Output:

Example: This example provides a button to first disable the callbacks and then add and fire the method to see the result.

<!DOCTYPE HTML>  

<html>   

<head>  

    <title>  

      JQuery | callbacks.disable() method 

    </title> 

    <script src= 

"https://code.jquery.com/jquery-3.5.0.js"></script>  

</head>    

<body style="text-align:center;"> 

    <h1 style="color:green;">   

        GeeksForGeeks   

    </h1>  

    <p id="GFG_UP">  

    </p> 

    <button onclick = "Geeks();"> 

    click here 

    </button> 

    <button onclick = "disable();"> 

    disable 

    </button> 

    <p id="GFG_DOWN">  

    </p>        

    <script>  

        var el_up = document.getElementById("GFG_UP"); 

        var el_down = document.getElementById("GFG_DOWN"); 

        el_up.innerHTML = "JQuery | callbacks.disable() method"; 

        var res = ""; 

        var callbacks = jQuery.Callbacks(); 

        function disable() { 

            callbacks.disable(); 

        } 

        function Geeks() { 

            // first function to be added to the list 

            var fun1 = function(val) { 

              res = res +  

"This is function 1 and value passed is " + val + "<br>"; 

            };   

            // second function to  be added to the list 

            var fun2 = function(val) { 

              res = res +  

"This is function 2 and value passed is" + val + "<br>"; 

            }; 

            callbacks.add(fun1); // adding the function 1 

            callbacks.fire("GFG_1"); // calling the function 1 

            callbacks.add(fun2); // This will not work. 

            callbacks.fire("GFG_2"); // This will not work. 

            el_down.innerHTML = res; 

        }  

    </script>  

</body>    

</html>

Output:

Article Tags :

JavaScript

JQuery

Web Technologies

jQuery-Methods