{"id":7762,"date":"2022-06-02T04:55:31","date_gmt":"2022-06-02T04:55:31","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7762"},"modified":"2022-06-02T04:55:31","modified_gmt":"2022-06-02T04:55:31","slug":"como-desactivar-un-boton-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/","title":{"rendered":"Como desactivar un bot\u00f3n con JavaScript"},"content":{"rendered":"<p>En este mundo hay gente que le cuesta mucho esperar. No quieren esperar a recibir o enviar algo ni 5 segundos y esto puede hacer que tu aplicaci\u00f3n o formulario pueda fallar por no considerar la existencia de este tipo de individuos, ya que estos suelen pulsar los botones repetidamente si entienden que no ha funcionado a la primera y tu como programador tienes que evitar que se env\u00eden peticiones m\u00faltiples para no saturar un servidor.<\/p>\n<p>Bien es cierto que es important\u00edsimo que tu p\u00e1gina web cargue r\u00e1pido y brinde la informaci\u00f3n al usuario en el m\u00ednimo tiempo posible pero en algunos casos es inevitable tener que hacer que el usuario espere unos instantes para facilitarle una informaci\u00f3n.<\/p>\n<p>Por ese motivo, en este art\u00edculo quiero ofrecerte 2 posibilidades para <strong>desactivar un bot\u00f3n con JavaScript<\/strong> mientras se ejecuta un proceso.<\/p>\n<p>Acompa\u00f1ado a esto, siempre es bueno mostrar al usuario algo que indique que debe esperar un momento para procesar su petici\u00f3n.<\/p>\n<p>Este proceso puede ser el registro en base de datos de una informaci\u00f3n concreta, la subida de un archivo o la obtenci\u00f3n de alg\u00fan dato que el usuario solicita, entre otras muchas funciones que puede realizar una p\u00e1gina Web.<\/p>\n<p>Entiende que esto te va a resultar \u00fatil siempre que la informaci\u00f3n vaya a ser procesada de forma as\u00edncrona ya sea con Ajax, Fetch o cualquier otra forma que conozcas para buscar, recoger o enviar informaci\u00f3n al servidor sin cargar la p\u00e1gina.<\/p>\n<h2>Desactivar bot\u00f3n con el evento \u00abclick\u00bb<\/h2>\n<p>En tu archivo <strong>HTML<\/strong> puedes incorporar un bot\u00f3n de la siguiente forma:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/button.html\"><span class=\"kw2\">button<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;myButton&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Pulsar<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/button.html\"><span class=\"kw2\">button<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Luego, en tu archivo <strong>JavaScript<\/strong> o dentro de un etiqueta &lt;script&gt; puedes hacer lo siguiente:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"kw2\">const<\/span> myButton <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'myButton'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\nmyButton.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    myButton.<span class=\"me1\">disabled<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n    myButton.<span class=\"me1\">style<\/span>.<span class=\"me1\">opacity<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">0.7<\/span><span class=\"sy0\">;<\/span>\n    myButton.<span class=\"me1\">textContent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'Ejecutando proceso...'<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"co1\">\/\/simulaci\u00f3n de espera para ejecuci\u00f3n de un proceso<\/span>\n    setTimeout<span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        myButton.<span class=\"me1\">textContent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'Pulsar'<\/span><span class=\"sy0\">;<\/span>\n        myButton.<span class=\"me1\">style<\/span>.<span class=\"me1\">opacity<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span>\n        myButton.<span class=\"me1\">disabled<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> 5000<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>El elemento bot\u00f3n con identificador \u00abmyButton\u00bb lo obtenemos con getElementById().<\/p>\n<p>Luego, con el evento \u00abclick\u00bb de este bot\u00f3n desactivo el bot\u00f3n, le aplico un estilo para darle una opacidad de 0.7, cambio el texto del bot\u00f3n para que en el momento de ejecuci\u00f3n indique \u00abEjecutando proceso&#8230;\u00bb y, finalmente, utilizo setTimeOut para simular la ejecuci\u00f3n del proceso durante 5 segundos para ver el efecto.<\/p>\n<p>Despu\u00e9s de transcurrir esos 5 segundos, vuelvo a activar el bot\u00f3n, cambiar el texto del mismo para que muestre \u00abPulsar\u00bb y vuelvo a poner una opacidad de 1 para que se muestre sin opacidad.<\/p>\n<p>En una ejecuci\u00f3n por Ajax o Fetch, en el success o respuesta de la operaci\u00f3n deber\u00e1s incorporar esto \u00faltimo para que justamente despu\u00e9s de finalizar la operaci\u00f3n se restablezca el bot\u00f3n.<\/p>\n<h2>Desactivar bot\u00f3n con el atributo \u00abonclick\u00bb<\/h2>\n<p>Otra opci\u00f3n para desactivar el bot\u00f3n no menos interesante es crear una funci\u00f3n en el c\u00f3digo JavaScript y llamarla en el atributo \u00abonclick\u00bb del elemento button.<\/p>\n<p>En este caso, puedes crear el bot\u00f3n de la siguiente forma:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/button.html\"><span class=\"kw2\">button<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;myButton2&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span> <span class=\"kw3\">onclick<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;executeProcess()&quot;<\/span>&gt;<\/span>Pulsar<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/button.html\"><span class=\"kw2\">button<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Y en el <strong>JavaScript<\/strong> crear la siguiente funci\u00f3n:<\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"kw2\">function<\/span> executeProcess<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw2\">const<\/span> myButton <span class=\"sy0\">=<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'myButton2'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    myButton.<span class=\"me1\">disabled<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n    myButton.<span class=\"me1\">style<\/span>.<span class=\"me1\">opacity<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">0.7<\/span><span class=\"sy0\">;<\/span>\n    myButton.<span class=\"me1\">textContent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'Ejecutando proceso...'<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"co1\">\/\/simulaci\u00f3n de espera para ejecuci\u00f3n de un proceso<\/span>\n    setTimeout<span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"co1\">\/\/console.log('Espera por favor...');<\/span>\n        myButton.<span class=\"me1\">textContent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">'Pulsar'<\/span><span class=\"sy0\">;<\/span>\n        myButton.<span class=\"me1\">style<\/span>.<span class=\"me1\">opacity<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span>\n        myButton.<span class=\"me1\">disabled<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> 5000<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>Se trata del mismo c\u00f3digo pero dentro de una funci\u00f3n y sin usar el event \u00abclick\u00bb con addEventListener().<\/p>\n<h2>Conclusiones<\/h2>\n<p>Aunque no lo creas hay usuarios muy impacientes que desesperadamente suelen pulsar botones varias veces con la intenci\u00f3n de acelerar la respuesta pero, lamentablemente, el resultado no ser\u00e1 el que desean y esto puede conllevar a sus frustraci\u00f3n.<\/p>\n<p>Por eso, puede ser verdaderamente importante considerar este peque\u00f1o detalle para hacer que la visita de cualquier usuario a tu sitio web sea m\u00e1s agradable.<\/p>\n<p>Est\u00e1 claro que lo que se comenta en este art\u00edculo es un peque\u00f1o detalle que puede resultar hasta insignificante pero, te aseguro que en los detalles vas a marcar la diferencia.<\/p>\n<p>Te he estado hablando de 2 formas de conseguir este efecto de desactivar el bot\u00f3n cuando se ejecuta un proceso. Con addEventListener y el evento \u00abclick\u00bb o con el atrubuto \u00abonclick\u00bb en el mismo bot\u00f3n.<\/p>\n<p>Las 2 opciones son buenas y funcionan pero, mi experiencia me dice que debo confiar m\u00e1s en el segundo m\u00e9todo m\u00e1s funcional ya que cuando ejecutas eventos dentro de otros eventos, en algunos casos addEventListener no funciona.<\/p>\n<p>Usando el atributo \u00abonclick\u00bb llamando a una funci\u00f3n siempre funciona.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/jose-aguilar.com\/scripts\/javascript\/disable-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/jose-aguilar.com\/scripts\/javascript\/disable-button\/disable-button.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.<\/p>\n","protected":false},"author":1,"featured_media":7763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[78],"class_list":["post-7762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-botones"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-02T04:55:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/\",\"name\":\"Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png\",\"datePublished\":\"2022-06-02T04:55:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png\",\"width\":500,\"height\":500,\"caption\":\"Como desactivar un bot\u00f3n con JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como desactivar un bot\u00f3n con JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog","description":"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog","og_description":"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-06-02T04:55:31+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/","name":"Como desactivar un bot\u00f3n con JavaScript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png","datePublished":"2022-06-02T04:55:31+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como desactivar un bot\u00f3n con JavaScript despu\u00e9s de haberlo pulsado con el objetivo de evitar que el usuario lo vuelva a pulsar.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/06\/Como-desactivar-un-boton-con-JavaScript.png","width":500,"height":500,"caption":"Como desactivar un bot\u00f3n con JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-desactivar-un-boton-con-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como desactivar un bot\u00f3n con JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7762"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7762\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7763"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}