Disable select(dropdown) on checkbox click (React JS and Material UI)

0
votes

I have a React JS application and i am using material UI with it. I have grid like below enter image description here

My requirement is when i click on a checkbox only that particular row's select should get enabled. I have tried with disabled attribute and document.getElementById but no luck.

HTML code for Select

<FormControl name="selectDdl" id={`selectHr${index}`}  variant="outlined" className='selectLayout' >
            <Select id={`selectHrs${index}`}  disabled={isSelectDisabled} name = {`selectHrs${index}`} >
            {optionItemsHours}
            </Select>

Code to enable the dropdown

const chkDays = (event) => {
  
 var selectHr = document.getElementById("selectHr0");
 selectHr.disabled = false;
 document.getElementById("selectHr0").children[0].classList.remove("Mui-disabled");
// setisSelectDisabled(false); -- this disable all dropdown of page
}
1
reactjsmaterial-ui

1 Answers

2
votes

As you are using react its not good to modify dom directly. I have created small example here - https://codesandbox.io/s/sad-microservice-l5m6k

You can modify this as per your need.