By Vishal Basumatary in javascript — Mar 24, 2023

disable button click jquery

How to Disable Button Click Using jQuery?

If you want to prevent users from clicking a button in your webpage or web application, disabling the button is one way to do it. In this blog post, I will explain how to disable button click using jQuery.

Step 1: Create a HTML Button

First, you need to create a HTML button that you want to disable. To do this, you can use the following code:

<button id="myButton">Click Me</button>

The above code creates a HTML button with an ID of "myButton". You can change the ID to whatever you want.

Step 2: Include jQuery Library

To use jQuery, you need to include the jQuery library in your HTML file. You can do this by adding the following code inside the head tag:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

The above code includes the jQuery library from a CDN (Content Delivery Network).

Step 3: Disable Button Click

Now that you have created a HTML button and included the jQuery library, you can use jQuery to disable the button click. To do this, you can use the following code:

<script>
  $(document).ready(function(){
    $('#myButton').click(function(){
      return false;
    });
  });
</script>

The above code uses jQuery to select the button with an ID of "myButton" and attaches a click event to it. Inside the click event, it returns false, which prevents the default action of the button (i.e., clicking the button).

Step 4: Test Button Click

Finally, you can test the button click by clicking the button in your webpage or web application. If everything is working correctly, the button should not perform any action when clicked.

Alternative Way to Disable Button Click

Another way to disable button click using jQuery is to use the prop() method. To do this, you can use the following code:

<script>
  $(document).ready(function(){
    $('#myButton').prop('disabled', true);
  });
</script>

The above code uses jQuery to select the button with an ID of "myButton" and sets its disabled property to true, which disables the button click.

Conclusion

Disabling button click using jQuery is a simple process that can be accomplished using either the click event or the prop() method. Depending on your specific use case, you may prefer one method over the other. By following the steps outlined in this blog post, you should now be able to disable button click in your own webpages and web applications.