Problemas con el botón HTML disabled={true}. La aplicación está en JavaScript + React. Establecí el valor inicial del botón disabled={true} . Por ejemplo, lo llamaré id="button1". Una vez que hago clic en otro botón, digamos id=button2, vuelvo a habilitar mi button1 con el código document.getElementById('button1').disabled=false; . El botón se vuelve a habilitar, pero una vez que se hace clic no tiene ninguna funcionalidad, parece que todavía está deshabilitado. Qué estoy haciendo mal ?
OK, aquí está mi código simplificado:
function App() { const approve = () => { console.log('test'); }; const filterWeek2 = () => { document.getElementById('approve').removeAttribute("disabled"); }; return ( <div className="App"> <nav> <ul className="nav-area"> <li><button id="Week2" onClick={filterWeek2}>WEEK 2</button></li> <li><button id="approve" onClick={approve} disabled="disabled">APPROVE</button></li> </ul> </nav> </div> ); } export default withAuthenticator(App);El deshabilitado es un atributo booleano, su presencia en un elemento HTML deshabilita el elemento. Si está presente en el elemento, deshabilitará el elemento HTML, sin importar el valor que tenga.
Tienes que eliminar el atributo usando removeAttribute para que sea editable
const disabled = document.querySelector(".disabled"); const normal = document.querySelector(".normal"); normal.addEventListener("click", () => { if (disabled.hasAttribute("disabled")) disabled.removeAttribute("disabled"); else disabled.setAttribute("disabled", true); }) <button disabled class="disabled">button</button> <button class="normal">toggle</button> Como está utilizando React, puede alternar disabled usando el estado. MANIFESTACIÓN
disabled={active} Si active es true , entonces el elemento HTML está deshabilitado, de lo contrario está habilitado.