Double clicking detected with jquery on click

Double clicking detected with jquery on click - javascript

I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/

Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>

Related

How to find out which label contains 'active' class

I've got 4 labels that act as radio buttons. When a label is active it will have the class active. I want to find out which label has the active class when one of the labels is clicked. I've tried hasClass(), but that is executed before the classes are changed. Can someone tell me how I can solve this problem? Should I create a seperate method for every label?
$("#elements").click(function() {
if ($("#eventelement").hasClass("active")) {
console.log("event activated")
}
if ($("#roleelement").hasClass("active")) {
console.log("role activated")
}
// [...]
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

You dont need a class to find active option. You can just use :checked selector.
Here is working example.
$("#elements label").click(function () {
var currentValue = $("input[name=type]:checked").val();
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
label {
color: blue;
}
label.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off"> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Code to check both previous-active-label and current-active-label
Working snippet:-
$(document).ready(function(){
$('#elements label').on('click',function(){
var prev = $('label.active').children('input[type="radio"]').val();
var current = $(this).children('input[type="radio"]').val();
$('#elements label').removeClass('active');
$(this).addClass('active');
alert("previous active label is "+prev);
alert("current active label is "+current);
});
});
.active{
color:green;
font-size:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Found a solution inadvertently, wrapping the label selection in setTimeout delays it just enough to return the proper one.
$("#elements").on("click", function() {
setTimeout(function() {
var l = $("#elements label.active");
console.log(l.get()[0].id);
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Bind to radio input change and check which one is selected:
$("#elements input").on("change", function() {
var activeLabel = $("#elements input:checked").parent();
console.log(activeLabel.attr('id') + ' activated');
});
Please note, one can change the selection using keyboard as well, therefor click is not enough.
Also on JS Fiddle.

Checkbox change innerHTML and call function

I have a group of checkboxes:
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
<label class="btn btn-info">
<input name="total" id="total" type="checkbox">Total
</label>
<label class="btn btn-info">
<input name="max" id="max" type="checkbox">Max
</label>
<label class="btn btn-info">
<input name="mean" id="mean" type="checkbox">Mean
</label>
<label class="btn btn-info">
<input name="min" id="min" type="checkbox">Min
</label>
<label class="btn btn-info">
<input name="extrapo" id="extrapolation" type="radio">Extrapo
</label>
</div>
</form>
I'm trying to call two functions depending on whether the button is checked or not and also change the text on the label.
My JS attempt:
<script type="text/javascript">
$('[name=all]').change(function () {
if ($(this).is(':checked')) {
hideAll();
document.getElementById("all").innerHTML = "Show";
}
else {
showAll();
document.getElementById("all").innerHTML = "Hide";
}
});
</script>
I can call each function no problem on check and unchecked, but when I change the innerHTML the check button stops working.

You are changing the value of innerHTML and leaving only text there.
Solution:
Put the text inside a span element
<label class="btn btn-info" id="all">
<input type="checkbox" name="all">
<span>Hide</span>
</label>
Then in JS do:
$('input[name="all"]').on('change', function() {
if ($(this).is(':checked')) {
hideAll();
$('#all span').text('Show');
} else {
showAll();
$('#all span').text('Hide');
}
});

Currently, you are selecting the label which selects this HTML element:
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
When you set the innerHTML, you get rid of the input. I'd split up the label and input like this:
<input name="all" type="checkbox">
<label class="btn btn-info" id="all">Hide</label>

Can't get checked checkboxes in jquery

I'm trying to fill an array but jquery isn't finding the checked checkboxes
$('input[name="frequency"]:checked').map(function() {
frequencies.push($(this).val());
});
<div id="frequencyCheckboxes" class="btn-group" data-toggle="buttons" style="width:270px;">
<label class="btn btn-primary" for="cbm">
<input id="cbM" name="frequency" value="M" type="checkbox" autocomplete="off">M
</label>
<label class="btn btn-primary" for="cbW1">
<input id="cbW1" name="frequency" value="W1" type="checkbox" autocomplete="off">W1
</label>
<label class="btn btn-primary" for="cbW2">
<input id="cbW2" name="frequency" value="W2" type="checkbox" autocomplete="off">W2
</label>
<label class="btn btn-primary" for="cbW3">
<input id="cbW3" name="frequency" value="W3" type="checkbox" autocomplete="off">W3
</label>
<label class="btn btn-primary" for="cbW4">
<input id="cbW4" name="frequency" value="W4" type="checkbox" autocomplete="off">W4
</label>
<label class="btn btn-primary" for="cbW5">
<input id="cbW5" name="frequency" value="W5" type="checkbox" autocomplete="off">W5
</label>
</div>

Can you try below?
var frequencies = [];
$('input[name="frequency"]').click(function() {
frequencies.push($(this).val());
});

i think using each instead map should works
$(input[name="frequency"]).click(function(){
$('input[name="frequency"]:checked').each(function(i,el) {
frequencies.push($(el).val());
})
});

Yii2: How to disable radio button

<?php echo $form->field($model, 'status')->radioButtonGroup($model->getStatusList(), ['disabledItems'=>['APPROVED','DIGITAL','CDP']],
[
'class' => 'btn-group-sm',
'itemOptions' => ['labelOptions' => ['class' => 'btn btn-warning']]
]);
?>
I want to disable all previous radio buttons from currently checked.
As I showed in image status 'APPROVED','DIGITAL','CDP' are disabled because status print is selected. I have put these three status in disabled function but how to achieve this using jQuery.
PS- Using Yii2
HTML Code-
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="APPROVED" disabled> Approved</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="DIGITAL" disabled> Digital</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="CDP" disabled> CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT"> Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS"> OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING"> Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH"> Dispatch</label>
</div>

You can use prop to disable radio buttons.
$(':radio:checked').closest('label').prevAll('label :radio').prop('disabled', true);
Demo:
$(':radio').on('change', function() {
$(':radio:checked').closest('label').prevAll('label').addClass('disabled').children(':radio').prop('disabled', true);
}).trigger('change');
.disabled {
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="APPROVED">Approved</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DIGITAL">Digital</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="CDP" checked>CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT">Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS">OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING">Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH">Dispatch</label>
</div>

How can I get info from these buttons on the server side

I have these buttons inside a form. How can I know which ones were selected when the user submits the form?
<form action="/">
<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>
<input type="submit value="submit"></input>
</form>

Your button group is a bootstrap style group and means nothing on the server side.
Your inputs will need to be named in order to produce a value from the form's postback.
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="check1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input name="check2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input name="check3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Double clicking detected with jquery on click - javascript

Related

How to find out which label contains 'active' class

Checkbox change innerHTML and call function

Can't get checked checkboxes in jquery

Yii2: How to disable radio button

How can I get info from these buttons on the server side

Categories

Resources