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>
Related
I would like to set a selected button in Bootstrap's btn-group:
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
How can I pre-select option 5? This answer suggests that I can add active class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.
Here is a fiddle: http://bootply.com/90490
Here is another fiddle with the active class applied, showing why it isn't the correct solution: http://bootply.com/90491 - click on any of the other buttons, and button 5 still remains active.
Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.
Markup
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
</div>
</div>
JavaScript
$(document).ready(function() {
$(".btn").first().button("toggle");
});
If you want to, for example, pre-toggle the third button, you can use the slice function like so:
$(".btn").slice(2,3).button("toggle");
Alternatively you could assign identifiers to the buttons.
Here's my fiddle: http://bootply.com/90501
I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttons which gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>5
</label>
<label class="btn btn-default">
<input type="radio">6
</label>
<label class="btn btn-default">
<input type="radio">7
</label>
</div>
As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:
The data-toggle="buttons" in the btn-group div.
The active class on the label 5.
The checked on the <input type="radio"> for 5.
I hope this helps others.
You can remove checked from input tag of first button,and add active class on condition .
eg:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary" [ngClass]="{'active': splitOption=='equal'}" >
<input type="radio" name="options" id="option1" autocomplete="off" > =
</label>
</div>
I have some radio buttons that are being rendered as actual buttons and the selected one bleeds into the modal-footer. I am using bootstrap. The code is:
<td>
<div class="btn-group radio-group" data-toggle="buttons">
<label class="btn btn-default">
<input id="ID1" name="Name1" type="radio" value="True">
A
</label>
<label class="active btn btn-default">
<input checked="checked" id="ID1" name="Name1" type="radio" value="False">
B
</label>
</div>
</td>
And here is a picture of what's happening.
I know that I'm not including all of the CSS and Modal code, but I'm hoping someone can at least point to a direction for research.
Thanks!
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>
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:
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!