CODEWITHSUNDEEP
htmljquerybootstrap-4
Aaron165
Aaron165

Reputation: 59

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?

Upvotes: 0

Views: 3076

Answers (2)

Syed H
Syed H

Reputation: 270

When a radio button (or a label containing a radio button) is clicked, it's checked property is automatically changed to true. Your current JQuery function, sets the the clicked radio button's checked property to false upon clicking, thus virtually making it impossible to be set to true.

If you just need to find out which radio button was clicked, the following JQuery code will work:

<script>
    $('form').click (function() {
        alert("clicked");
        let checkedOption = $('form').find("input[name='cycle']:checked");
        //checkedOption contains the radio that was just clicked
        //all other radios with the same 'name' will automatically turn false
     });
</script>

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 2

Related Questions