CODEWITHSUNDEEP
htmltwitter-bootstrap
user5581557
user5581557

Reputation: 213

Bootstrap Radio Addon Behaviour

I'm trying to have a number of radio buttons but I want only 1 to be selected at a time. If one is selected then the previous should get deselected.

Currently all radio buttons can be selected and they don't deselect on change.

How do I fix this?

<div class="container">

    <h2 class="form-signin-heading">Existing Users</h2>
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" aria-label="...">
        </span>
        <label class="form-control" aria-label="...">User-1</label>
    </div>

    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" aria-label="...">
        </span>
        <label class="form-control" aria-label="...">User-2</label>
    </div>

</div>

JSFiddle: https://jsfiddle.net/a8Lteg1p/

Upvotes: 1

Views: 106

Answers (3)

Prabhakaran
Prabhakaran

Reputation: 1544

<div class="container">
  <h2 class="form-signin-heading">Existing Users</h2>
  <div class="input-group">

    <span class="input-group-addon">
                    <input type="radio" name="my-radio-group" aria-label="...">
                    </span>
    <label class="form-control" aria-label="...">User-1</label>

  </div>
  <div class="input-group">

    <span class="input-group-addon">
                    <input type="radio" name="my-radio-group" aria-label="...">
                    </span>
    <label class="form-control" aria-label="...">User-2</label>
  </div>
</div>

Add Name attr to your radio button. There is no unique about the radio buttons you have entered.

Upvotes: 2

Pavan Teja
Pavan Teja

Reputation: 3202

use common name attribute value for all the checkboxes you want.

name='grouped' value can be anything.just used `grouped` for your reference.

see the working fiddle here

Upvotes: 0

Kapil
Kapil

Reputation: 1141

Please add name of radio button like this

<div class="container">
    <h2 class="form-signin-heading">Existing Users</h2>
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" name="radio" aria-label="...">
        </span>
        <label class="form-control" aria-label="...">User-1</label>
    </div>
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" name="radio" aria-label="...">
        </span>
        <label class="form-control" aria-label="...">User-2</label>
    </div>
</div>

Upvotes: 2

Related Questions