{"id":4954,"date":"2021-10-17T02:00:00","date_gmt":"2021-10-17T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/disable-button-jquery\/"},"modified":"2024-02-08T00:33:44","modified_gmt":"2024-02-07T23:33:44","slug":"disable-button-jquery","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/disable-button-jquery\/","title":{"rendered":"Disable button in jQuery [With examples]"},"content":{"rendered":"<p>To disable a button with jQuery you need to set the <code>disabled<\/code> property on the button using the <code>prop<\/code> method. For example <code>$('.my-button').prop('disabled', true)<\/code>.<\/p>\n<p>Here&#8217;s the step by step process:<\/p>\n<ul class=\"wp-block-list\">\n<li>Select the button you want to disable.<\/li>\n<li>Use the jQuery <code>prop<\/code> method.<\/li>\n<li>Set the <code>disabled<\/code> property to <code>true<\/code><\/li>\n<\/ul>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The <code>prop<\/code> method admits two parameters. The first is the property we want to set and the second is the value we want to give to such property. (Or a function that returns a value)<\/p>\n<\/blockquote>\n<p>Table of contents:<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"#disable-button-on-click\">Disable button on click<\/a><\/li>\n<li><a href=\"#disabling-submit-button-when-textarea-is-empty\">Disabling submit button when textarea is empty<\/a><\/li>\n<li><a href=\"#disabling-submit-button-when-input-is-empty\">Disabling submit button when input is empty<\/a><\/li>\n<li><a href=\"#disable-button-on-page-load\">Disable button on page load<\/a><\/li>\n<li><a href=\"#enabling-button-with-jquery\">Enabling button with jQuery<\/a><\/li>\n<li><a href=\"#checking-if-the-button-is-disabled-or-enabled-with-jquery\">Checking if the button is disabled or enabled with jQuery<\/a><\/li>\n<li><a href=\"#disable-button-with-javascript\">Disable button with JavaScript<\/a><\/li>\n<li><a href=\"#references\">References<\/a><\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"disable-button-on-click\">Disable button on click<\/h2>\n<p>So, let&#8217;s say we have a button and we want to <strong>disable the button when clicking<\/strong> in another button:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-button\"<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"disable-button\"<\/span>&gt;<\/span>Disable button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This is the jQuery code we will need:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">var<\/span> disableButton = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n    $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, <span class=\"hljs-literal\">true<\/span>);\n};\n\n$(<span class=\"hljs-built_in\">document<\/span>).on(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-string\">'#disable-button'<\/span>, disableButton);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRvpVZp\" data-src=\"\/\/codepen.io\/anon\/embed\/GRvpVZp?height=450&amp;theme-id=1&amp;slug-hash=GRvpVZp&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRvpVZp\" title=\"CodePen Embed GRvpVZp\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"disabling-submit-button-when-textarea-is-empty\">Disabling submit button when textarea is empty<\/h2>\n<p>This is a very common scenario that we can find in plenty of web applications or websites. In those cases where it makes no sense to submit a form with <strong>an empty textarea<\/strong>, it&#8217;s a good practice to disable the submit button when their textarea has no content.<\/p>\n<p>All we have to do is:<\/p>\n<ul class=\"wp-block-list\">\n<li>Attach the <code>keyup<\/code> event to our textarea element<\/li>\n<li>Retrieve the value of the textarea<\/li>\n<li>Remove white trailing whitespaces<\/li>\n<li>Disable the submit button when the value is empty.<\/li>\n<\/ul>\n<p>Let&#8217;s say we have the following HTML code with our textarea and our button:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-textarea\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\">\"5\"<\/span> <span class=\"hljs-attr\">cols<\/span>=<span class=\"hljs-string\">\"30\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-button\"<\/span> <span class=\"hljs-attr\">disabled<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This would be our jQuery code:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">var<\/span> checkTextarea = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> content = $(<span class=\"hljs-string\">\"#my-textarea\"<\/span>).val().trim();\n  $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, content === <span class=\"hljs-string\">''<\/span>);\n};\n\n$(<span class=\"hljs-built_in\">document<\/span>).on(<span class=\"hljs-string\">'keyup'<\/span>, <span class=\"hljs-string\">'#my-textarea'<\/span>, checkTextarea);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLoOBmB\" data-src=\"\/\/codepen.io\/anon\/embed\/yLoOBmB?height=450&amp;theme-id=1&amp;slug-hash=yLoOBmB&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLoOBmB\" title=\"CodePen Embed yLoOBmB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<p>Remember that the second parameter of the <code>prop<\/code> method also allows us to use a function instead of a boolean?<\/p>\n<p>We can test it out in this same example by replacing our previous code with the following one, where we just return a boolean value on the function we pass as a parameter.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">\n<span class=\"hljs-comment\">\/\/ Example: using a function as the second parameter<\/span>\n<span class=\"hljs-comment\">\/\/ instead of a boolean<\/span>\n<span class=\"hljs-keyword\">var<\/span> checkTextarea = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n  $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, (e) =&gt; {\n    <span class=\"hljs-keyword\">return<\/span> $(<span class=\"hljs-string\">\"#my-textarea\"<\/span>).val().trim() === <span class=\"hljs-string\">''<\/span>;\n  });\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"disabling-submit-button-when-input-is-empty\">Disabling submit button when input is empty<\/h2>\n<p><a href=\"#disabling-submit-button-when-textarea-is-empty\">The same exact technique we used for the textarea<\/a> can be applied for any other input.<\/p>\n<p>I updated the <code>id<\/code> attribute and the <code>function<\/code> name but the rest is all the same:<\/p>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYdqYBo\" data-src=\"\/\/codepen.io\/anon\/embed\/zYdqYBo?height=450&amp;theme-id=1&amp;slug-hash=zYdqYBo&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYdqYBo\" title=\"CodePen Embed zYdqYBo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"disable-button-on-page-load\">Disable button on page load<\/h2>\n<p>The easiest way to show a button as disabled on page load is by directly assigning to it the <code>disabled<\/code> attribute on the HTML code:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- Enabled button --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-button\"<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- Disabled button --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-button\"<\/span> <span class=\"hljs-attr\">disabled<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>However, if for any reason you need to do this dynamically and you have no way to modify the HTML code, you can still do this using jQuery.<\/p>\n<p>It is as simple as disabling it on document ready:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">$(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n    $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, <span class=\"hljs-literal\">true<\/span>);\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 class=\"wp-block-heading\" id=\"enabling-button-with-jquery\">Enabling button with jQuery<\/h2>\n<p>As you&#8217;ve probably guessed, enabling a button is as simple as disabling it. In fact, we will be using the exact same <code>prop<\/code> method. The only difference is that now we&#8217;ll set the value for <code>disabled<\/code> to <code>false<\/code> instead of <code>true<\/code>.<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Disables a button<\/span>\n$(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, <span class=\"hljs-literal\">true<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Enables a button<\/span>\n$(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, <span class=\"hljs-literal\">false<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here&#8217;s an example:<\/p>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRvZRRG\" data-src=\"\/\/codepen.io\/anon\/embed\/GRvZRRG?height=450&amp;theme-id=1&amp;slug-hash=GRvZRRG&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRvZRRG\" title=\"CodePen Embed GRvZRRG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"checking-if-the-button-is-disabled-or-enabled-with-jquery\">Checking if the button is disabled or enabled with jQuery<\/h2>\n<p>To check the state of a button all we have to do is get the value of the <code>disabled<\/code> property.<\/p>\n<p>The <code>prop<\/code> method not only provides us a way to set the properties but also allows us to check their state too. It&#8217;s as simple as omitting the second parameter:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Gets the disabled state of a button<\/span>\n<span class=\"hljs-keyword\">const<\/span> isDisabled = $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>);\n\n<span class=\"hljs-keyword\">if<\/span>( isDisabled ){\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Is disabled!\"<\/span>);\n}\n<span class=\"hljs-keyword\">else<\/span>{\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"Is enabled\"<\/span>);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNzeNVe\" data-src=\"\/\/codepen.io\/anon\/embed\/rNzeNVe?height=450&amp;theme-id=1&amp;slug-hash=rNzeNVe&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNzeNVe\" title=\"CodePen Embed rNzeNVe\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"disable-button-with-javascript\">Disable button with JavaScript<\/h2>\n<p>If jQuery is not your thing, you can <a href=\"https:\/\/alvarotrigo.com\/blog\/disable-button-javascript\/\">disable a button with vanilla JavaScript<\/a> (aka, with just JavaScript).<\/p>\n<p>To disable a button with JavaScript you need to set the <code>disabled<\/code> property to <code>true<\/code> by directly setting the value to the property <code>disabled<\/code> on the DOM element. For example: <code>document.querySelector('#my-button').disabled = true<\/code>.<\/p>\n<p>So, here&#8217;s the equivalence:<\/p>\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Disabling button using jQuery<\/span>\n$(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>, <span class=\"hljs-literal\">true<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Disabling button using JavaScript<\/span>\n<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#my-button'<\/span>).disabled = <span class=\"hljs-literal\">true<\/span>\n\n\n\n<span class=\"hljs-comment\">\/\/ Retrieving disabled state with jQuery<\/span>\n<span class=\"hljs-keyword\">const<\/span> state = $(<span class=\"hljs-string\">'#my-button'<\/span>).prop(<span class=\"hljs-string\">'disabled'<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Retrieving disabled state with JavaScript<\/span>\n<span class=\"hljs-keyword\">const<\/span> state = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#my-button'<\/span>).disabled;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then you would also need to change the respective event listeners if you use any.<\/p>\n<p>Here&#8217;s an example of how to <strong>disable the button after click<\/strong> using JavaScript:<\/p>\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYEZYWd\" data-src=\"\/\/codepen.io\/anon\/embed\/eYEZYWd?height=450&amp;theme-id=1&amp;slug-hash=eYEZYWd&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYEZYWd\" title=\"CodePen Embed eYEZYWd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"references\">References<\/h2>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/api.jquery.com\/prop\/\" rel=\"nofollow noopener\" target=\"_blank\">jQuery <em>.prop()<\/em> method<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/disabled\" rel=\"nofollow noopener\" target=\"_blank\">Disabled property (MDN Web Docs)<\/a><\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/replace-text-with-jquery\/\">Replace Text with jQuery (With Examples)<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/jquery-checkbox-checked\/\">Check If Checkbox Is Checked with jQuery<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/javascript-alert\/\">JavaScript Alert (Examples and Usage)<\/a><\/li>\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/prevent-scroll-on-scrollable-element-js\/\">Prevent Scroll On Scrollable Elements<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>How to disable a button with jQuery? Here we explain how to do it with jQuery and JavaScript. Examples included!<\/p>\n","protected":false},"author":1,"featured_media":4953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[120],"tags":[10,18],"class_list":["post-4954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-javascript","tag-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4954"}],"version-history":[{"count":2,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4954\/revisions"}],"predecessor-version":[{"id":8732,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4954\/revisions\/8732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4953"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}