how can I only allow a user to select only one checkbox (bootstrap checkbox)?-CodePudding

I added bootstrap checkboxes in my code, but the user should be able to select only one checkbox, the others get unchecked automatically. But I m not able to do that, can someone tell what should I add in my code please Here is the screenshot of the result

<div  style="display: flex;">
                               
     <label  for="uo1">UO1</label><br>
     <input  type="checkbox" name="uo1" id="uo1" value="0" />
     
      <div id="uo1div" style="display:none">
       <BR> TJM = 225 €
      </div>
                                 
   <script type="text/javascript">
      $('#uo1').change(function() {
           $('#uo1div').toggle();
      });
   </script>

</div>

CodePudding user response：

You want a radio type input, not check boxes. Each input gets a unique id and value, but the same name to put it in a "radio group." See https://www.w3schools.com/html/html_form_input_types.asp

<input  type="radio" name="uo" id="uo0" value="0" />
<input  type="radio" name="uo" id="uo1" value="1" />
<input  type="radio" name="uo" id="uo2" value="2" />

CodePudding user response：

You can use radio button instead. and add css which look like checkbox. or you can use javascript or jQuery to uncheck all checkbox and then check current one.