React Js Enable Disable Textbox on Checkbox Value

React Enable Disable textbox on checkbox value: To enable/disable a textbox in React on checkbox click, you can create a state variable to keep track of the checkbox's status. In the checkbox's onChange event, you can update the state variable with the current checked status. Then, in the textbox's props, you can conditionally set the disabled attribute to true or false based on the state variable's value using a ternary operator.

written

reviewed

updated

How can I enable/disable a textbox in React based on a checkbox's click event?

This code is a React application that renders a container with a title, a checkbox, and an input field. The checkbox controls the "disabled" attribute of the input field, so when the checkbox is checked, the input field is disabled, and when the checkbox is unchecked, the input field is enabled.

Here is a breakdown of the code:

const { useState } = React;: This line imports the useState hooks from the React library. These hooks are used to manage state and side effects in React components.
function App() { ... }: This defines the App component, which is a functional component in React. The App component returns JSX, which is a syntax extension of JavaScript that allows you to write HTML-like code within your JavaScript code.
const [disabled, setDisabled] = useState(false);: This line uses the useState hook to create a state variable disabled with an initial value of false. The setDisabled function is used to update the value of the disabled state variable.
<input type="checkbox" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />: This line renders a checkbox input element. The checked prop is set to the value of the disabled state variable, which means that the checkbox will be checked when disabled is true and unchecked when disabled is false. The onChange prop is a callback function that updates the value of the disabled state variable when the checkbox is checked or unchecked.
<input type="text" disabled={!disabled} />: This line renders a text input element. The disabled prop is set to the opposite of the disabled state variable, which means that the input field will be disabled when disabled is true and enabled when disabled is false.

React Enable Disable textbox on checkbox value Example

    <script type="text/babel" data-presets="env,react">
        const { useState } = React;
        function App() {
            const [disabled, setDisabled] = useState(false);
            return (
                <div className="container">
                    <h3>React Js Enable/Disable Input Text field based on checkbox value</h3>
                    <div className="input-group">
                        <input
                            type="checkbox"
                            checked={disabled}
                            onChange={(e) => setDisabled(e.target.checked)}
                        />
                        <input type="text" disabled={!disabled} />
                    </div>
                </div>

            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Enable Disable textbox on checkbox click

React JS Tutorial

React Js Enable Disable Textbox on Checkbox Value

Feedback for Abhishek

How can I enable/disable a textbox in React based on a checkbox's click event?

React Enable Disable textbox on checkbox value Example