disabled={true} HTML button attribute does not work right in JavaScript + React

Question

Having issues with disabled={true} HTML button. App is in JavaScript + React. I set button initial value disabled={true} .For example purposes I will call it id="button1". Once I click another button let's say id=button2, I re-enable my button1 with code document.getElementById('button1').disabled=false;. Button re-enables but once clicked it has no functionality, it looks like it is still disabled. What am I doing wrong ?

OK here is my simplified code:

 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);

check this answer: stackoverflow.com/a/11737624/12104850

benmneb
– benmneb

2021-09-20 23:49:20 +00:00
Commented Sep 20, 2021 at 23:49 — benmneb
– benmneb, Commented Sep 20, 2021 at 23:49

DecPK · Accepted Answer · 2021-09-21 00:22:09Z

2

The disabled is a boolean attribute, Its presence on an HTML elements disables the element. If it is present on the element, it will disable the HTML element, doesn't matter what value it has.

You have to remove the attribute using removeAttribute to make it 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>

Since you are using React, then you can toggle disabled using state. DEMO

disabled={active}

If active is true then the HTML element is disable else enabled.

edited Sep 21, 2021 at 0:22

answered Sep 20, 2021 at 23:52

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Min Over a year ago

still does not work.

DecPK Over a year ago

add your code in the question.

Min Over a year ago

Added the code snippet

DecPK Over a year ago

@Min Updated answer with sandbox link

Collectives™ on Stack Overflow

disabled={true} HTML button attribute does not work right in JavaScript + React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related