Need help with Dynamically Checked 'Bootstrap' Radio Buttons

Wappler General How To
#1

I have looked through numerous posts about Dynamically check Radio Buttons and Checkboxes but cannot find an answer to my particular issue. I know that @nshkrsh has commented on one of my earlier posts but I still cannot get this to work.

I am trying to display dynamic Radio Buttons as Bootstrap Buttons like the second row in this screenshot and NOT as the first row, which shows standard radio buttons. OK this screenshot shows that I can get the visual presentation as I want it.

image
image.png777×106 3.1 KB

Here is the code from DevTools showing that second row, you will see that the 2nd radio button is ‘checked’ (dynamically from a query) but it doesn’t show as being selected in the screenshot above.

image
image.png816×420 17.2 KB

If I then click on the 3rd radio button (‘Don’t Know’), the button is highlighted

image
image.png777×106 4.78 KB

and in the code, the LABEL now has the ‘active’ class BUT the 2nd radio button is still checked and not the 3rd button.

image
image.png816×420 27.6 KB

So visually, to the user, the 3rd button look to be checked but the value=“1” will be sent to the database and not value=“2”.

How can I get this to work with my Bootstrap Buttons?
Any advice would be welcomed.
If I have gone about this all wrong then please let me know what I should have done. Cheers.

#2

Hello @UKRiggers
I believe you will need to check the Bootstrap 4 docs about this. Especially the part explaining:

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually

1 Like
#3

Hi @Teodor, thanks for the reply, and yes I had missed that when looking through docs. Your knowledge is a wonderful thing, can you bottle it and post me some? :smiley:

I have now read the Bootstrap docs, and tried a few things but I am really struggling. Can you please help me?

  1. I need to show the initially selected option on opening the page ie via query
  2. And then I need to be able to click/switch selection.

Cheers

#4

please help here @sid.

#5

I use JS for this:
$("#radio").prop('checked', true).parent().addClass('active');

prop sets item as checked & parent() adds active class to the parent element (label).
I do not bind the “checked” property dynamically. Only using this JS do one of the radios get checked.

You can set this JS to run on either onsuccess of server connect which has this data. Or just on jQuery load event - $(function(){ ~~here~~ });

To dynamically find which radio to select, based on value, use this:
$("input[name=desktop][value=" + dmx.parse('getvaluehere') + "]").prop('checked', true).parent().addClass('active');

I am assuming you know how to use dmx.parse in JS here.

I am not sure why your third element is not getting checked though. Did you submit the form to see which value is actually going through in form submission? This checked prop could be misleading.

2 Likes
#6

P.S. I have recently used another REPEATER based solution for a checkbox list… which does not require custom JS. But can’t use Bootstrap groups for that. With CSS classes, it does end up looking same as a group, so not an issue.