Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Radio button problem

Kacper Kaczmarek free 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 free 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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