Preselecting a radio button in twitter's bootstrap without using jquery.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="athletebutton" value="1" checked> Athlete </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="coachbutton"> Coach </label>
</div>
Mark the label class with active
See screenshots & video here:
Video:http://d.pr/v/b3Gm
Screenshot:
Related
How to create a switch to set a boolean in separated "Yes" "No" buttons?
I work with angular and typescript, so a radio button doesn't work as I need a boolean type.
I mean how to have:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
In following style:
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">YES</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">NO</label>
</div>
<div class="form-row">
<div class="column">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active" for="visualContagi">
<input type="radio" name="options" id="visualContagi" checked> Contagi
</label>
<label class="btn btn-primary" for="visualGuariti">
<input type="radio" name="options" id="visualGuariti" checked> Guariti
</label>
<label class="btn btn-primary" for="visualDecessi">
<input type="radio" name="options" id="visualDecessi" checked> Decessi
</label>
<label class="btn btn-primary" for="visualRicoveri">
<input type="radio" name="options" id="visualRicoveri" checked> Ricoveri
</label>
<label class="btn btn-primary" for="visualTotPos">
<input type="radio" name="options" id="visualTotPos" checked> Totale Positivi
</label>
</div>
</div>
</div>
Hi, I have this radio button group as part of a form. The problem is that the buttons all get the "active" class applied to them when I load the webpage. I haven't written any javascript, it's just bootstrap, and this CSS applied to remove the outline when I click on the buttons:
.btn-primary.focus, .btn-primary:focus {
box-shadow: none;
}
I'm using the latest version of Firefox on macOS.
What I am noticing is that each of your <input type="radio" elements have the checked attribute attatched to them. If you remove that, then it should be fixed. I hope this helps!
I am using bootstrap 3.3.6 and I am trying to disable this type of radio btn-group. I've tried placing the disabled on both the label and input, but it doesn't seem to work. The buttons would appear as disabled but still clickable. Whenever I click the buttons, an active class will be added.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled="disabled">NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled="disabled">YES
</label>
</div>
What am I doing wrong? Is it possible to disable the buttons?
For demo find below link of jsfiddle
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="radio" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 3
</label>
</div>
Demo
The disabled attribute on the input will disable it, as in, you cannot change the value of the input while it's disabled. What you're seeing are the CSS stypes added by bootstrap that make it sorta look like something changed when you remove your mouse from the input.
You can prevent these styles with a little bit of jQuery:
$(".btn.disabled").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("disabled");
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled>NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled>YES
</label>
</div>
I am using radio buttons in Bootstrap 4 like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" id="physical-option" onclick="alert('Physical!')" checked="checked" /> Physical
</label>
<label class="btn btn-primary">
<input type="radio" id="scenery-option" onclick="alert('Scenery!')" /> Scenery
</label>
</div>
As you can see I have the onclicks there. But, when I click them, nothing happens! Is this a bug in Bootstrap?
Can you put the onclick on the label instead of the radio? I think bootstrap makes the label the radio trigger instead of the actual radio button.
Have a look at the scenery button:
https://jsfiddle.net/zf7p2Lbd/
<label class="btn btn-primary" onclick="alert('Scenery!')">
<input type="radio" id="scenery-option" /> Scenery
</label>
After countless hours of research, I'm still dumbfounded on how to get the checked attribute working for button radio groups for Bootstrap. I'm trying to default "Excellent."
Even though I know for sure radio inputs are checked and not selected, I even tried selected and nothing works.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
Excellent </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Good">
Good </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Poor">
Poor </label>
</div>
If clarification is needed, please let me know.
In twitter bootstrap, you will indicate the default value using the 'active' class.
So, for your example, if you are using Twitter Bootstrap, the following code will use Excellent as default checked.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default **active**">
<input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
Excellent </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Good">
Good </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Poor">
Poor </label>
</div>
When you toggle over the buttons, you add/remove the class - 'active' from the label's class.
For an example, check this out - http://getbootstrap.com/javascript/#buttons - Radio
Looks like the question and answer are using bootstrap 3.0. I had the same question but with bootstrap 2.3.
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn active"> Option 1</button>
<button class="btn"> Option 2</button>
<button class="btn"> Option 3</button>
</div>
Two things:
You should use different IDs for each of your <input> elements -- they're supposed to be unique!
Your example works for me! Check it out at JSFiddle!