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.
Answered
- 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