{"id":674503,"date":"2025-06-11T22:00:33","date_gmt":"2025-06-11T19:00:33","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-disable-a-button-with-jquery-2\/"},"modified":"2025-06-11T22:00:33","modified_gmt":"2025-06-11T19:00:33","slug":"how-to-disable-a-button-with-jquery-2","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/","title":{"rendered":"How to Disable a Button with jQuery"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2492fb93b48\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2492fb93b48\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#First_Things_First_What_Does_%E2%80%9CDisable%E2%80%9D_Mean\" >First Things First: What Does \u201cDisable\u201d Mean?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#jQuery_Setup_Just_in_Case\" >jQuery Setup (Just in Case)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#How_to_Disable_a_Button_Using_jQuery\" >How to Disable a Button Using jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#Real-Life_Example_Disable_on_Form_Submit\" >Real-Life Example: Disable on Form Submit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#Another_Trick_Disable_Based_on_Input\" >Another Trick: Disable Based on Input<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#Quick_Recap\" >Quick Recap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-disable-a-button-with-jquery-2\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n<div class=\"entry-inner\">\n<p>Ever needed to stop someone from clicking a button too early, like before filling out a form or while something\u2019s loading? That\u2019s where disabling buttons comes in handy.<\/p>\n<p>With jQuery, this is super straightforward. Let\u2019s walk through how it works, with clear examples you can copy and tweak for your site.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"First_Things_First_What_Does_%E2%80%9CDisable%E2%80%9D_Mean\"><\/span>First Things First: What Does \u201cDisable\u201d Mean?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When we say we\u2019re \u201cdisabling\u201d a button, we mean we&#8217;re preventing users from being able to click it. It also usually looks a bit faded or greyed out, giving people a visual cue that it\u2019s not ready to use.<\/p>\n<p>In HTML, you can disable a button by adding the <code>disabled<\/code> attribute:<\/p>\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;button disabled&gt;Click Me&lt;\/button&gt;\n<\/code><\/pre>\n<p>But if you want to do this dynamically, like based on user action, that\u2019s where jQuery steps in.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"jQuery_Setup_Just_in_Case\"><\/span>jQuery Setup (Just in Case)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before anything else, make sure jQuery is loaded on your page. You can add it like this:<\/p>\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">script<\/a> src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<p>Once that\u2019s in place, you&#8217;re good to go.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Disable_a_Button_Using_jQuery\"><\/span>How to Disable a Button Using jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s say you have a button like this:<\/p>\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;button id=\"myButton\"&gt;Submit&lt;\/button&gt;\n<\/code><\/pre>\n<p>To disable it using jQuery, you\u2019d do this:<\/p>\n<pre class=\"wp-block-preformatted\">javascriptCopyEdit<code>$('#myButton').prop('disabled', true);\n<\/code><\/pre>\n<p>Just like that, the button is now disabled.<\/p>\n<p>And to enable it again?<\/p>\n<pre class=\"wp-block-preformatted\">javascriptCopyEdit<code>$('#myButton').prop('disabled', false);\n<\/code><\/pre>\n<p>Simple toggle. No headaches.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Real-Life_Example_Disable_on_Form_Submit\"><\/span>Real-Life Example: Disable on Form Submit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s a common use case: You\u2019ve got a form, and you want to disable the submit button right after someone clicks it, so they don\u2019t accidentally submit twice.<\/p>\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;form id=\"myForm\"&gt;\n  &lt;input type=\"text\" placeholder=\"Your name\" required&gt;\n  &lt;button type=\"submit\" id=\"submitBtn\"&gt;Send&lt;\/button&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n<pre class=\"wp-block-preformatted\">javascriptCopyEdit<code>$('#myForm').on('submit', function(e) {\n  $('#submitBtn').prop('disabled', true);\n});\n<\/code><\/pre>\n<p>That\u2019s it. One click, and the button locks itself.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Another_Trick_Disable_Based_on_Input\"><\/span>Another Trick: Disable Based on Input<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Want the button to stay disabled until someone fills out a field?<\/p>\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;input type=\"text\" id=\"nameField\" placeholder=\"Your name\"&gt;\n&lt;button id=\"submitBtn\" disabled&gt;Send&lt;\/button&gt;\n<\/code><\/pre>\n<pre class=\"wp-block-preformatted\">javascriptCopyEdit<code>$('#nameField').on('keyup', function() {\n  let value = $(this).val().trim();\n  $('#submitBtn').prop('disabled', value === '');\n});\n<\/code><\/pre>\n<p>This keeps the button disabled until the user types something. Super useful for login forms, email signups, and similar stuff.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Quick_Recap\"><\/span>Quick Recap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s the gist:<\/p>\n<ul class=\"wp-block-list\">\n<li>Use <code>.prop('disabled', true)<\/code> to disable<\/li>\n<li>Use <code>.prop('disabled', false)<\/code> to enable<\/li>\n<li>jQuery makes it quick and clean<\/li>\n<li>Great for improving UX and avoiding double-click chaos<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>By using these jQuery techniques, you can effectively manage button states, enhancing user experience and preventing unintended interactions on your web pages.<a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/www.scaler.com\/topics\/disable-button-jquery\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n<p><em>Featured image by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/www.freepik.com\/author\/stories\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">storyset<\/a> on <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/www.freepik.com\/free-vector\/all-data-illustration_417601821.htm#fromView=search&amp;page=1&amp;position=2&amp;uuid=3545c40b-3604-4d86-83d9-e94d468f3037&amp;query=code\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Freepik<\/a><\/em><\/p>\n<\/p><\/div>\n<p><\/p>\n<div class=\"author-inner\">\n<p class=\"bio-name\">Noupe Editorial Team<\/p>\n<div class=\"bio-desc\">\n    The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.<br \/>\nIf you have any feedback or would like to make a suggestion, email David at [email\u00a0protected].<\/div>\n<div class=\"simple-social-icons\">\n<ul class=\"social-link clearfix\">\n       <!-- facebook --><\/p>\n<li><i class=\"fa fa-link\" aria-hidden=\"true\"><\/i><\/li>\n<p>        <!-- facebook --><\/p>\n<p>    <!-- twitter --><\/p>\n<p>    <!-- feed --><\/p>\n<p>    <!-- google plus --><\/p>\n<p>    <!-- linkedin --><br \/>\n            <!-- flickr --><br \/>\n            <!-- flickr -->\n    <\/ul>\n<\/div>\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMN63nwsw68G3Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">News<\/a> articles, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/category\/general\/\" target=\"_blank\" >General <\/a><\/span>category.<\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.noupe.com\/magazine\/development\/disable-button-jquery.html\" target=\"_blank\" >Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever needed to stop someone from clicking a button too early, like before filling out a form or while something\u2019s loading? That\u2019s where disabling buttons comes in handy. With jQuery, this is super straightforward. Let\u2019s walk through how it works, with clear examples you can copy and tweak for your site. First Things First: What&#8230;<\/p>\n","protected":false},"author":1,"featured_media":674504,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.noupe.com\/wp-content\/uploads\/2025\/05\/417601821_11668837.jpg","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[76769,100823,81323],"class_list":["post-674503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-html","tag-jquery","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/674503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=674503"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/674503\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/674504"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=674503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=674503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=674503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}