JavaScript – How to create a radio button group in the form to allow the selection of the smoking / non-smoking section of the restaurant?

I want to mimic the behavior of radio buttons with Bootstrap. form-group So a form has several buttons per line (for example “btn btn-success”), with the buttons being able to “select”, but only one of them can be selected at a time. ۔ I want an output like this:

But I’m getting this:

Enter image description here.

Also, I am not able to select the smoking button.

The rule for the following is:

 <div class="form-group row">
    <label for="section" class="col-12 col-md-2">Section</label>
       <div class="col-md-10">
         <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-success active">
              <input type="radio" name="options" id="option1" autocomplete="off" checked>Non- 
               Smoking
            </label>
          <label class="btn btn-danger">
             <input type="radio" name="options" id="option2" autocomplete="off">Smoking
          </label>
        </div>
     </div>
 </div>

Leave a Reply

Your email address will not be published.