How to disable a form conditionally in React

Question

I don't want to ask this simple question here but this feature is not working for me and I don't understand why. Everything looks correct:


class Questionnaire extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true,
    };
  }
  render() {
    return (
      <div disabled={this.state.status === true ? true : false}>
        <h1>The Form</h1>
        <input type="text" />
        <br />
        <input type="text" />
        <br />
        <input type="text" />
        <br />
        <input type="text" />
        <br />
        <button>Submit</button>
      </div>
    );
  }
}

export default Questionnaire;

Do you see something wrong here? Please point out my mistake. Also I've created this stackblitz.

@RobertoZvjerković, it's a very basic and simple form. Is there a workaround? — Tanzeel, Oct 31 '21 at 13:21
I'm accepting answer from @Dmitriif. Also Roberto 's answer solved my problem. Both have valid points. Thank you all. — Tanzeel, Oct 31 '21 at 13:24
@RobertoZvjerković, yes, it answers my question. Thanks for the additional answer — Tanzeel, Oct 31 '21 at 13:36

score 1 · Accepted Answer · answered Oct 31 '21 at 13:21

1

Depending on what you want to achieve you can either set disabled on the entire form with a fieldset - How can I make an entire HTML form "readonly"?

or you can set disabled property to the submit button

answered Oct 31 '21 at 13:21

Dmitriif

2,020
9
20

Got it. I'm accepting this answer – Tanzeel Oct 31 '21 at 13:23

score 0 · Answer 2 · answered Oct 31 '21 at 13:22

0

You can wrap your div by fieldset instead. or use below CSS

div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}

check this: How to disable all div content

answered Oct 31 '21 at 13:22

Ahmed Hany

952
6
12

Input elements with `pointer-events: none` can still be accessed using the keyboard – Guy Harper Sep 28 '22 at 17:36

How to disable a form conditionally in React

2 Answers2