I would like to find a way on how to link bootstrap button classes in the following manner?
<!-- HTML -->
<div class="col-md-6 col-sm-6">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-groceries"></i>
<span>Grocery</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-cooking"></i>
<span>Cooking</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6">
<label class="">
<input type="checkbox">
<i class="flaticon-house-cleaning"></i>
<span>Cleaning</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6>
<label class="">
<input type="checkbox" ng-model="mySelfHandyman" >
<i class="flaticon-handyman-1"></i>
<span>Handyman</span>
<a>select</a>
</label>
</div>
<!-- jquery -->
$('input[type="checkbox"]).on('change',function(){
$('input[type="checkbox"]').not(this).prop('checked', false);
});
using input as radio type is not an option. they have to be checkbox. Results that are desired is that when checkbox = true, button (label in this case) should be active and when we select a different checkbox previous button should got to its default state and the current one should be active. Situation also call for only 1 checkbox to be selected at one time. jquery is in place to solve that problem, but I am unable to toggle the buttons between default and active states on checkbox clicks. Currently I have to click on the buttons twice to remove the active class. First click makes the checkbox = true and button class=active, if i click on second checkbox, it makes previous checkbox = false and (this) = true, but it also makes the current button class=active without changing the previous button's class to default.
I would really appreciate any help in this matter.
Thanks
The way to handle an exclusive state is to make all of the objects one state (ex. off)and then go back and change the state of the active one to it's unique state (ex. on). So use jQuery selector :checkbox to make your life easier and this to filter in the checkbox/button that was actually clicked.
Also, I changed the HTML somewhat. It's following the pattern when Bootstrap is properly done.
.container~~~▼
~~~~~~~~~~~.row~~~▼
~~~~~~~~~~~~~~.col-md-6~~~~~~~.col-md-6
The children of a row must add up to x=12, (ex. .col-lg-4, .col-lg-4, .col-lg-4)
SNIPPET
$(':checkbox').on('change', function() {
$(':checkbox').prop('checked', false);
$(this).prop('checked', true);
});
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class='container'>
<section class='row'>
<div class="col-md-12 col-sm-12">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-groceries"></i>
<span>Grocery</span>
<a>select</a>
</label>
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-cooking"></i>
<span>Cooking</span>
<a>select</a>
</label>
</div>
</section>
<section class='row'>
<div class="col-md-12 col-sm-12">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-house-cleaning"></i>
<span>Cleaning</span>
<a>select</a>
</label>
<label class="btn btn-primary">
<input type="checkbox" ng-model="mySelfHandyman">
<i class="flaticon-handyman-1"></i>
<span>Handyman</span>
<a>select</a>
</label>
</div>
</section>
</main>
Related
I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css
I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>
I am trying to add a class to a great-great-great-great-grandparent of an input element using jquery and/or plain javascript. The idea is; after clicking the button (class="ws-btn-previous") on the current step, a class is added to the fieldset containing selected capacity radio button in the previous step and fade into that fieldset then remove the added class.
The HTML for active fieldset is as follows;
<fieldset class="working_status ">
<h4 class="text-center">What is your Phone's condition?</h4>
<div class="container">
<div>
<ul class="h-ws row">
<li class="wsbf">
<input type="radio" class="sell-rdb" id="ws1" name="working_status" value="Excellent" />
<label class="ws-btn-labels" for="ws1">
<p id="wslbl">Excellent</p>
<p>Good as new. Has no dents or scratches.</p>
</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous ws-btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
The HTML section of preceding fieldset in previous step is as follows;
<fieldset class="capacity-gj7p">
<h4 class="text-center">Please select your Galaxy J7 Prime memory capacity</h4>
<div class="container">
<div>
<ul class="h-m row">
<li class="cbf">
<input type="radio" class="sell-rdb" id="sc49" name="capacity" value="32" />
<label class="capacity-btn-labels" for="sc49">32</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous sc-btn-previous">Previous</button>
<button type="button" class="btn btn-next capacity-btn-next">Next</button>
</div>
</fieldset>
My attempt to tackle the problem using jQuery and plain javascript is as follows;
jQuery(document).ready(function() {
$('form .ws-btn-previous').on('click', function() {
var fset = document.getElementById("sell-wiz").elements["capacity"];
$(this).parents('fieldset').fadeOut(200, function() {
fset.addClass('capacity-parent');
$('.capacity-parent').fadeIn();
fset.removeClass('capacity-parent');
});
});
});
What am I missing? Is there a better way to do it? Thanks in advance.
Sorry if this seems a simple question but I can't figure it out or find a solution anywhere. I am new to angularJS and have a webpage which has two radio buttons and a "Details" button.
Obviously the website is written in angularJS and also using twitter bootstrap.
The question is a "Has the details been checked?" with a "Yes" and "No" radio button.
Clicking the "Details" button opens a modal with a "Close" button on it and details in it.
What I'm after is for these radio buttons to be disabled until the "Details" button has been clicked or once the "Close" button has been clicked from the modal (which ever is the best solution).
The only code I can provide is my HTML. I need it to be done without using JQuery.
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
You have to look for the ngDisabled directive.
<input type="radio" ng-disabled="!enableRadioButton">
<button ng-click="enableRadioButton = true">Details</button>
Edit
Since you added a code example, something like this should do the trick:
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required ng-disabled="enableRadioButtons" />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required ng-disabled="enableRadioButtons" />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
Add $scope.enableRadioButtons = true; to the opendatachecksmodel() method.
You could set the flag true when you close the modal as well.
So I have a section to add a color and I got it to dynamically create a copy of the div with a new ID for each dynamic div.
The problem is that once the div is created, I don't know how to close it (i.e. remove it from DOM via a "close" action). I know it's because it's dynamic content. You cant bind event likes the static content, it's will not bind to the elements because they don't appear at the time you bind. I just don't know how to go about getting it to close.
The div I want to close starts with "Color" + incremented number. I hope I explained this correctly and any help would be appreciated. Thanks.
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
Here's the link to the working example:
jsfiddle
Sure, see this updated fiddle;
Essentially you want to bind an event to the document using .on(), like:
$(document).on('click', '.remove', function(e){
$(this).closest('.color-wap').remove();
});
I added the .color-wrap class to the #color div to avoid working with duplicated ID's via cloning, and added the .remove class to the remove button
1)Use the .on() to bind events on dynamically created elements
2)jquery selector ^ can help in selecting the div with id of color-number.
3).animate() to toggle height of the div or .remove if you want to completly remove the element.
$(function() {
var count = 0;
$('#addcolor').click(function() {
count++;
var clonediv = $('#color');
$(clonediv).clone().insertBefore('#color');
$(clonediv).attr("id", "color" + count);
});
$(document).on("click", ".glyphicon-remove-sign", function() {
$(this).closest("div[id^='color']").animate({"height":"toggle"});
//$(this).closest("div[id^='color']").remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12" id="test">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>