How to disable select till a value is given in previous sele

Topic: How to disable select till a value is given in previous selects

Garciat427 asked a year ago

*Expected behavior*The next Select components cannot be selected till the first select component has a value given

*Actual behavior*All selects remain active. On other frameworks, I can simply give an option of "disabled = true" and change it with a state event change to "disabled = false" but does not exist on MDB-Bootstrap-React. Maybe this is done another way?

Note: Disabled allows for the select to exist but remain unclickable till the value changes to false.

Resources (screenshots, code snippets etc.)

enter image description here

Edit 1 : With new Examples of Process

Example via Materalize CSS Framework: MateralizeCSS Disabled Select Link of Demo: https://materializecss.com/select.html ^ Materalize simply disables the select from being clickable and used. I mainly use this to allow for the user to select only whats necessary from the form.

Example via React-Materalize (Open Sourced React components using Materialize CSS) enter image description here

The Select has options built into it but is just disabled so no user can change the value or select anything. Link of Demo: http://react-materialize.github.io/react-materialize/?path=/story/components-select--disabled

React Code Snippet for React-Materialize Select disabled

 <Select disabled value="2"> <option value="1"> Option 1 </option> <option value="2"> Option 2 </option> <option value="3"> Option 3 </option> </Select> 

Piotr Glejzer staff commented a year ago

Do you have a example of this problem? thanks.

Garciat427 commented a year ago

I added Edit 1 with examples of how the other framework did it.

Piotr Glejzer staff commented a year ago

Yes, you are right. I add this attribute to our select. It will available in the next release. Have a nice day.

Add comment

Write

Create snippet

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: React
MDB Version: 4.25.1
Device: Web
Browser: Google Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

Garciat427

5Support score
1Questions 0Answers

0Snippets likes 0Snippets

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes

Garciat427

Privacy Preferences