I used this Bootstrap 3 code to change radios into buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
It works well in the jsfiddle but in my website the color of buttons are not changed when clicked. It always is like this:
But the submitted value is correct.
I added this code to add .active class manually:
// Change the color of selected radio button
$('label.btn').click(function() {
$(this).parent('.btn-group').children('label.btn').addClass('active');
$(this).removeClass('active');
});
UPDATE:
This code is not needed. You just need to add class 'active' to one of labels initially.
This code works well without any js:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
Related
I am trying to find a way to activate a button when both of those checkboxes are checked. I've disabled the button but I can't think of a method of actually triggering the isActive when both of them are checked.
<div class="form-check mb-1">
<input
class="form-check-input"
type="checkbox"
id="age"
checked
/>
<label
class="form-check-label"
for="age"
>By clicking this you agree that you
are at least 18 years old.</label
>
</div>
<div class="form-check mb-4">
<input
class="form-check-input"
type="checkbox"
id="terms"
checked
/>
<label
class="form-check-label"
for="terms"
>By clicking this you agree to our
<router-link to="/terms"
>Terms & Conditions</router-link
>
</label>
</div>
<button
:disabled="isActive"
class="btn btn-outline-light btn-lg px-5 mb-1"
type="submit"
>
Register
</button>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
You should do something like
First checkbox
<input class="form-check-input" v-model="checkOne" type="checkbox" id="age" checked />
second checkbox
<input class="form-check-input" v-model="checkTwo" type="checkbox" id="age" checked />
button
<button :disabled="!checkOne || !checkTwo" class="btn btn-outline-light btn-lg px-5 mb-1" type="submit" >
I am new to angular 5. I need a help to add dropdown menu, when I select the contents in dropdown the search box should be displayed.
This is text box code.I need to put this in dropdown so that when I'll select A i need to get search text box for A. When i select module same text box should be displayed for module.
<div class="col-sm-1">
<label for="A">A:</label>
</div>
<div class="col-sm-3">
<input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
<label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
<input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>
Instead of two search text boxes, I want use dropdown to display single search textbox.
Here is a short example of accomplishing it. (i ignored bootstrap for brevity)
It was possible, by declaring my dropdown value as a variable called "searchOption" and then using it as a condition for every search button.
Select
<select [(ngModel)]="searchOption">
<option value="A">A</option>
<option value="module">module</option>
</select>
<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>
I am creating a bootstrap btn-group that I want to give the user the ability to select one or no options from. Everything on the data end is working great except for the fact that I can not remove the active class from the button when the user turns it off.
<div class="btn-group" id="localRasterBG" data-toggle = "buttons">
<label class="btn btn-default localBaseMaps" id="btnLand Cover" data-layerName="Land Cover" onclick="rasterButtonClick(event)" >
<input type="radio" name="options" id="btnLandCover" autocomplete="off"> Land Cover
</label>
<label class="btn btn-default localBaseMaps" data-layerName="Elevation" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnElevation" autocomplete="off"> Elevation
</label>
<label class="btn btn-default localBaseMaps active" id="btnPopulation" data-layerName="Population" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnLandScan" autocomplete="off"> Population
</label>
</div>
However, I am unable to remove the "active' class with javascript:
function rasterButtonClick(e){
e.target.removeClass("active");
}
Any idea what I could be doing wrong?
Thanks, Tyler
removeClass is a jQuery function, you need to change it to:
$(e.target).removeClass("active");
I know this has been asked before but I the answers don't seem to work for me.
I am looking to decrease the size of my textbox and line it up beside a select and some text.
Here is my code.
<div class="controls">
<div class="btn-group">
<label class="btn btn-default">
<input type="checkbox" name="blah" value="true">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
<input class="form-control col-xs-1" placeholder="x" type="text" required="required">this should be beside the textbox. I also want the textbox to be small. One character small.
</label>
</div>
</div>
Also in bootply.
http://www.bootply.com/NePcbYQqfm
Thank you in advance!
Try this:
<div class="controls">
<div class="btn-group col-xs-4">
<label class="btn btn-default">
<input name="blah" value="true" type="checkbox">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
</label>
<input class="form-control input-sm" placeholder="x" required="required" type="text">this should be beside the textbox. I also want the textbox to be small. One character small.
</div>
</div>
It will work.
It seems buttons-radio no longer works in Bootstrap 3
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-default" value="1" type="button" >1</button>
<button class="btn btn-default" "value="2" type="button" >2</button>
</div>
It has been replaced with radio button inputs. Is there any way to bring back the only one button allowed to be checked in a group with buttons? I need to be able to have the group be totally unpicked after one item has been selected so radio buttons won't do.
This ended up being the answer for me to keep using buttons in a radio type in BS3:
$(this).addClass("current").siblings().removeClass("active");
This ended up being the answer for me to keep using buttons in a radio type in BS3:
$(this).addClass("current").siblings().removeClass("active");
Could you give all of the radio's the same name=? Then they'll toggle each other..
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio3" value="option3"> 3
</label>
Demo: http://bootply.com/75922
Add
data-toggle="button"
to each radio button
Source http://labs.thecssninja.com/bootleg/index.html#buttons
Add input type="radio" inside tab:
<a href="#prices" class="btn btn-default active" data-toggle="tab">
<input type="radio">Prices
</a>