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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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