How to disable MDBSelect, MDBInputGroup


Topic: How to disable MDBSelect, MDBInputGroup

Malasharhan asked 5 years ago

I want to make MDBSelect and MDBInputGroup disabled. And then when I click "Edit" button, they will be enabled. Please help me.


Konrad Stępień staff answered 5 years ago

Hi @Malasharhan,

Something like this?

import React from "react";
import { MDBContainer, MDBInputGroup, MDBSelect, MDBBtn } from "mdbreact";

class App extends React.Component {
  state = {
    options: [
      {
        text: "Option nr 1",
        value: "1"
      },
      {
        text: "Option nr 2",
        value: "2"
      },
      {
        text: "Option nr 3",
        value: "3"
      }
    ],
    disable: true
  };

  handleSwitchChange = () => {
    console.log(this.state.disable);
    this.setState({
      disable: !this.state.disable
    });
  };

  render() {
    return (
      <MDBContainer className="p-5">
        <MDBInputGroup
          containerClassName="flex-nowrap mb-3"
          prepend="Element to disable"
          hint="Username"
          className={!this.state.disable && "disabled"}
        />
        <MDBSelect
          options={this.state.options}
          selected="Choose your option"
          label="Example label"
          className={!this.state.disable && "disabled"}
        />
        <MDBBtn onClick={() => this.handleSwitchChange()}>
          Status: {this.state.disable ? "Activate" : "Disabled"}
        </MDBBtn>
      </MDBContainer>
    );
  }
}

export default App;

When you click the button you add disabled class for elements. You also can change the colour of input with your classes.

Best regards, Konrad.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.22.1
  • Device: PC
  • Browser: Chrome, Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags