How do I make these two radio-button-groups independent?
If I select an answer in one row, it deselects the answer in the other row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<title>Hello, world!</title>
</head>
<body class="p-3">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<span class="input-group-text me-2 rounded" id="inputGroup-sizing-md">Test video</span>
<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">YouTube</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Own video</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">None</label>
</div>
</div>
<div class="btn-toolbar mt-3" role="toolbar" aria-label="Toolbar with button groups">
<span class="input-group-text me-2 rounded" id="inputGroup-sizing-md">Test image</span>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio4">YouTube</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio5">Own image</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio6">None</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
In other words, I cannot choose None in the Test video-row and YouTube in the Test image-row at the same time.
Hope you can help me :)
change name="btnradio" in second row inputs to something else
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am using the bootstrap doc's example radio buttons code, but it does not display correctly:
This is the code in the example:
<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">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
See the fiddle here.
Any ideas on how to get these to work properly?
You've probably mistaken the version of the bootstrap and you have linked it wrongly.
Here you have works example with bootstrap#5:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<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">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I have two bootstrap toggle buttons, but when I click one of them, the other is getting affected. Can you please tell me what is wrong in my code ?
<div class="row p-0 m-0">
<!-- all day event toggle -->
<div class="col-md-3">
<label for="allDayEvent">All Day Event:</label><br>
<div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
<label class="btn btn-secondary" id="allDayEventYesLbl" >
<input type="radio" name="options" id="allDayEventYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active " id="allDayEventNoLbl" >
<input type="radio" name="options" id="allDayEventNo" autocomplete="off">
No
</label>
</div>
</div>
<!-- all day event toggle END -->
<!-- Recurring event toggle -->
<div class="col-md-3">
<label for="recurringEvent">Recurring Event:</label><br>
<div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
<label class="btn btn-secondary" id="recurringEventYesLbl">
<input type="radio" name="options" value="Y" id="recurringYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active" id="recurringEventNoLbl">
<input type="radio" name="options" value="N" id="recurringNo" autocomplete="off" checked>
No
</label>
</div>
</div>
<!-- recurring event toggle END -->
</div>
There is very simple mistake you might have overlooked. Both the inputs in both radio buttons have the same name. Inputs in same radio button should have same name, but in different groups should have different names. Just changing the names in the second group will fix it. Here is a fixed version!
<div class="row p-0 m-0">
<!-- all day event toggle -->
<div class="col-md-3">
<label for="allDayEvent">All Day Event:</label><br>
<div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
<label class="btn btn-secondary" id="allDayEventYesLbl" >
<input type="radio" name="options" id="allDayEventYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active " id="allDayEventNoLbl" >
<input type="radio" name="options" id="allDayEventNo" autocomplete="off">
No
</label>
</div>
</div>
<!-- all day event toggle END -->
<!-- Recurring event toggle -->
<div class="col-md-3">
<label for="recurringEvent">Recurring Event:</label><br>
<div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
<label class="btn btn-secondary" id="recurringEventYesLbl">
<input type="radio" name="optionsTwo" value="Y" id="recurringYes" autocomplete="off">
Yes
</label>
<label class="btn btn-secondary active" id="recurringEventNoLbl">
<input type="radio" name="optionsTwo" value="N" id="recurringNo" autocomplete="off" checked>
No
</label>
</div>
</div>
<!-- recurring event toggle END -->
</div>
Not really sure what's going on. As I decrease the width of the browser, the columns are supposed to go to the next line, but instead, they're going over top of each other, why?
Does it have to do with the way I'm naming the column classes? There's three so I put col-4 for each of them. Why don't they go to the next line when the width of the browser gets smaller?
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>
</head>
<body>
<div class="row">
<div class="col-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
Bootstrap's built in class to be used here should be:
.col-md-4
and not
.col-4
Please change all occurrences of .col-4 to .col-md-4 to get your desired result.
Edit: This will set medium screen sizes as a break point below which the div will occupy 100% of the width of the screen, hence the three divs will be stacked one below each other.
If you want them to break line you have to define from what size of screen they take other width
You set col-4 what means that all sizes of screen it sets col-4(width:33.33%)
As you said you want them to brake line that the reason you need to declare size;
for example:
col-md-4
→ from md and up it sets width:33.33% (12/4=3 => 100%:3=33.33%) and down from md (means sm and xs) it sets width:100%
Learn more here: https://getbootstrap.com/docs/4.0/layout/grid/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-md-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-md-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
</div>
Note!
bootstrap 4 removed xs size whats mean col-* is from xs and up
In latest Bootstrap 4 version, col-4 stands the width is 33.33% for all device. Instead of using col-4 you can use col-lg-4 or col-md-4 for getting your desire result in responsive design.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>
</head>
<body>
<div class="row">
<div class="col-lg-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Test
</label>
<label class="btn btn-primary">
<input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
</label>
</div>
</div>
<div class="col-lg-4">
<span class="main">Date</label>
<input id="dashboardDatePick" type="date" name="date">
</div>
<div class="col-lg-4">
<span class="main">Date 2</label>
<input id="dashboardTimePick" type="date" name="time">
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
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>
My form currently contains this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>
Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>
I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
jsfiddle-link
getbootstrap
You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.
JSFiddle
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Hope this helps!