Topic: Radio button problem
Kacper Kaczmarek asked 4 years ago
I have two radio buttons group. Each of them are the blue radio buttons avaliable in mdbootstrap.
Expected behavior When i click on radio button in first group and then on another from second group, the first one which i clicked should go back to "inactive" state.
Actual behavior
When i click on radio button in first group and then on another from second group, the first one which i clicked is still in "active" state even if radio itself is unckecked. I attach a snippet showing what's wrong with my radios
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/jquery/kacper_kaczmarek/2626169#html-tab-view
Marcin Luczak staff answered 4 years ago
Hello Kacper,
The functionality you want to have is unfortunately impossible to achieve without any custom JS/jQuery code because separate radio groups have no influence on each other.
I've made a snippet with custom jQuery code which will create this functionality for you and also I made some changes in your HTML. You've added the same id for every input, which is generally a bad practice, and I've also created a proper label attribute for
for better accessibility.
Take a look at the snippet and check JS section: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2628970
Best regards, Marcin
Kacper Kaczmarek answered 4 years ago
Thank You for your response!
I manage to figure it out using js yesterday, and it works just like yours script. In case of radio's id, they are generated by python script, so normally they are diffrent.
Best Regards, Kacper
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.15.0
- Device: Dell Laptop
- Browser: Microsoft Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes