How to disable MDBSelect, MDBInputGroup


Topic: How to disable MDBSelect, MDBInputGroup

Malasharhan asked a year 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 a year 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.
Status

Answered

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