CODEWITHSUNDEEP
javascriptreactjs
Ashish shetty
Ashish shetty

Reputation: 173

How to make a checkbox behave like a radio button in react

How to make the bootstrap check boxes to behave like a radio button in react ?. I have a dynamically loading rows in a table and each rows contain accept and reject check boxes, I want these checkbox to behave like a radio button. I cannot use radio button so need a way to make check boxes to behave like radio button.

                    <div className="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        id={page + item.RowKey + "Accept"}
                        name={page + item.RowKey + "Accept"}/>

                      <label
                        className="custom-control-label"
                        htmlFor={page + item.RowKey + "Accept"}>

                        Accept
                      </label>
                   </div>
                   <div className="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        id={page + item.RowKey + "Reject"} />
                      <label
                        className="custom-control-label"
                        htmlFor={page + item.RowKey + "Reject"}>

                        Reject
                      </label>
                   </div>

Upvotes: 1

Views: 4726

Answers (2)

Manish Yadav
Manish Yadav

Reputation: 11

You can use state to manipulate this. Like:

Below Link have a full explaination of it

Change checked attribute of controlled checkbox (React)

Upvotes: 0

Jose Pablo Wenzel
Jose Pablo Wenzel

Reputation: 11

You can use ref with checkboxes, and onClick for each of them, by using ref you can unCheck the box.

Here is some documentation on ref: https://reactjs.org/docs/refs-and-the-dom.html

Upvotes: 1

Related Questions