Q:

Radio buttons won't check in bootstrap button group

I have a bootstrap modal which contains a form, there are two radio style buttons inside that have been created based on the example for normal button styled radio options:
<form id="changePlanForm" action="/change_plan_submit.php" method="post">
    <div class="btn-group-toggle active" data-toggle="buttons">
        <label class="btn btn-outline-info active" for="1">
            <input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
        </label>
        <label class="btn btn-outline-info" for="2">
            <input type="radio" name="cycle" value="2" id="2" autocomplete="off">
        </label> Button 2
    </div>
</form>

However, when selecting a radio option the button will only appear "active" but will not become "checked". This is confirmed on submission of the form.
I had initially tried adding some JQuery as suggested here:
<script>
    $('form').click (function() {
        alert("clicked");
        $('form').find("input[name='cycle']:checked").prop('checked', false);
        $(this).find("input[name='cycle']").prop('checked', true);
     });
</script>

but this script only removes the currently selected checked attribute and does not apply it to the new button.
Am I missing something in the script, or is there an easier way to create Bootstrap form buttons that behave like radio buttons?
Thanks in advance!
-- Update 1 --
After doing some debugging it appears that when clicking on the label $(this) is not being defined and so there is nothing to set the checked property to true on.
Is there another way to identify the label that has been clicked on?

A:

You can simply use an onchange function to determine which radio button was checked and get its value using .val()
There is no need to set prop or attr for checked radio button to false or true on each click.
Run snippet below to see which radio button is checked on each click with a change function.

$('form').on('change', function() { 
   //Get the checked radio button value
   var getCheckedValue = $('input[name=cycle]:checked').val()
   //console.log
   console.log('Radio ' +getCheckedValue+ ' is checked'); 
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<form id="changePlanForm" action="/change_plan_submit.php" method="post">
  <div class="btn-group-toggle active" data-toggle="buttons">
    <label class="btn btn-outline-info active" for="1">
      <input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
    </label>
    <label class="btn btn-outline-info" for="2">
      <input type="radio" name="cycle" value="2" id="2" autocomplete="off"> Button 2
    </label>
  </div>
</form>

