Enable and Disable Event from element with jQuery

jQuery not only allow us to attach Event Handlers on the element it also allows to take control the flow of the events.

You can enable and disable an event whenever you want in your program.

When it’s required?

  • The event is no longer needed on the element.
  • Enable event when the specific condition is TRUE otherwise disables it. The most common example, of this you see on Registration page of many websites where they don’t enable click event until the user is not checked I agree on terms & conditions.

jQuery has on() and off() method that helps you to enable and disable your specific selector.

Enable and Disable Event from element with jQuery


Contents

  1. off() Method
  2. on() Method
  3. Example
  4. Demo
  5. Conclusion

1. off() Method

It removes Event handler from specified element.

Syntax –

$(selector).off ( event );

Example

$(document).ready(function(){
 // Remove click event from all paragraph elements
 $("p").off( 'click' ); 

 // Remove chanage event from Textbox id="txt_username"
 $( "#txt_username" ).off('change'); 

});

2. on() Method

This works opposite of off() method, it attaches an Event handler to the selected element.

Syntax –

$( selector ).on(event, function);

Example

$(document).ready(function(){
 // Attach click event to all paragraph elements
 $("p").on( 'click',function(){
   console.log('paragraph click');
 } ); 

 // Attach keyup event to Textbox id="txt_username"
 $( "#txt_username" ).on('keyup',usernameChange); 

});

function usernameChange(){
  var value = $(this).val();
  console.log(value);
}

3. Example

In the example, I am creating a Textbox and a Button. Defining change event on Textbox in jQuery.

When the input value is less than 18 then remove the click event from the button otherwise, it prints the entered age on the screen.

<input type='text' id='txt_age' placeholder='Enter your Age'>
<input type='button' id='submit' value='Submit'><br/>
<span style='color: red;'>Age should be greater than 18</span>
<div>Your Age: <span id='age'></span></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){

 $("#txt_age").change(function(){
  var age = Number( $("#txt_age").val() );
  if(age > 18){

   // Attach click event
   $("#submit").on('click',printAge);
  }else{

   // Remove click event
   $("#submit").off("click");
  }
 });
 
});

// Display Age
function printAge(){
 var age = $("#txt_age").val();
 $("#age").text(age);
}
</script>

4. Demo

Enter your Age in the Textbox and click Submit Button.


5. Conclusion

I showed how you can enable disable an event handler from the element. By this, you can restrict it when the event will trigger or disable.

If you are using AJAX for saving data and want the user only able to click once on the button, in this case, you can either remove the click event or add disabled attribute.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *