{"id":4952,"date":"2022-01-14T01:00:00","date_gmt":"2022-01-14T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/disable-button-javascript\/"},"modified":"2024-07-16T20:22:08","modified_gmt":"2024-07-16T18:22:08","slug":"disable-button-javascript","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/disable-button-javascript\/","title":{"rendered":"Disable a HTML Button in JavaScript [With Examples]"},"content":{"rendered":"\n

To disable a button using only JavaScript<\/strong> you need to set the disabled<\/code> property to true<\/code>. For example: element.disabled = true<\/code>.<\/p>\n\n\n\n

And to enable a button, you need do the opposite by setting the disabled<\/code> JavaScript property to false<\/code>.<\/p>\n\n\n\n

Here is a more complete example where we select the button and then change its disabled property:<\/p>\n\n\n

\/\/ Disabling a button using JavaScript<\/span>\ndocument<\/span>.querySelector('#button'<\/span>).disabled = true<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
\/\/ Enabling a disabled button<\/span>\ndocument<\/span>.querySelector('#button'<\/span>).disabled = false<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
These are the steps we have to follow:<\/p>\n\n\n\n
    \n
  1. Select the button element you want to disable.<\/li>\n\n\n\n
  2. Set the disabled<\/code> property to false<\/code>.<\/li>\n<\/ol>\n\n\n\n
    \n
    The disabled<\/code> property<\/a> reflects the HTML attribute disabled<\/code> and provide a way to change this property dynamically with JavaScript.<\/p>\n<\/blockquote>\n\n\n\n
    Disable Button JS Example<\/h2>\n\n\n\n
    For demo purposes and to keep it as simple as possible, we’ll be disabling the button when clicking on itself:<\/p>\n\n\n
    const<\/span> button = document<\/span>.querySelector('#button'<\/span>);\n\nconst<\/span> disableButton = ()<\/span> =><\/span> {\n    button.disabled = true<\/span>;\n};\n\nbutton.addEventListener('click'<\/span>, disableButton);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here’s the Codepen<\/a> so you can test it out yourself and play a bit more with it by changing the code:<\/p>\n\n\n\n