Develop Reference

removeClass to apply on a dropdown parent too

I got this working finally thanks to all the contributors here and w3schools.
I have 2 menus - Term and PayTerm. Term is always higher than PayTerm. The default disabled status is perfect. The problem happens when I click on any of the values in Term; the dropdown parent (Other 2) loses its disabled tag so it becomes clickable. I want it to remain disabled until Term's value is closest to PayTerm.
JSFiddle DEMO
HTML
<div class="container">
<div class="row">
<div class="col-12">
<div class="k__form">
<h2>Term</h2>
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-secondary w-100 active">
<input type="radio" name="options" value="10" id="option1" autocomplete="off"> 10
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="15" id="option2" autocomplete="off"> 15
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-secondary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 1</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-secondary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="k__form">
<h2>Pay Term</h2>
<div id="payterm" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-secondary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-secondary w-100 dropdown-toggle disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 2</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-secondary w-100 disabled">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p> </p>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" pattern="[0-9]*" id="adbr-rt" value="10" class="form-control" required>
<label class="form-control-placeholder" for="adbr-rt">Term</label>
</div>
</div>
<div class="col-12">
<div class="form-group">
<input type="number" pattern="[0-9]*" id="adbr-rpt" value="5" class="form-control" required>
<label class="form-control-placeholder" for="adbr-rpt">Pay Term</label>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('#term :radio').on('change', function() {
document.getElementById("adbr-rt").value = $(this).val();
var baseValue = parseInt($(this).val());
var option2List = $('#payterm :radio').filter(function() {
return parseInt($(this).val()) >= baseValue; //getting only the values lesser to the current and equal to it
});
$('#payterm :radio').removeAttr('disabled'); //resetting the option2
$('#payterm label').removeClass('disabled'); //resetting the labels
option2List.prop('disabled', 'disabled'); //disabling the lesser values
$.each(option2List, function() {
$(this).closest('label').addClass('disabled'); //add the disabled class to labesl
});
$('#payterm :radio:enabled').first().click();
});
$('#payterm :radio').on('change', function() {
document.getElementById("adbr-rpt").value = $(this).val();
});
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
$('#payterm label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});

after "var option2List = $('#payterm :radio').filter(function() {"
parseInt($(this).val()) return a NaN for "Other2" so "parseInt($(this).val()) >= baseValue" retuen false
past this after
var baseValue = parseInt($(this).val());
var v = 0;
var option2List = $('#payterm :radio').filter(function(i) {
if(i == 2){
v = parseInt($(this).val());
}
return ((!parseInt($(this).val()) && (v != (baseValue+5 && baseValue-5)) ) ? true :
parseInt($(this).val()) >= baseValue);

Change color of a Radio button permanently on click

Hi I designed a serious of Radio buttons. I want to change the color of radio buttons permanently on click. Please help me to implement this design. I have written this code here, Which is not working. Any suggestions would be highly appreciated.
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

You can use add and remove class with siblings like this.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
$(this).siblings().removeClass('active')
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

Try this code, Its working
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).addClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

I think you only need to change the toggleClass with addClass as you need to change color permanently.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
});

In my case, the below solution worked the best. Thanks all for your valuable inputs.
<style>
.btn-default.active{background-color:blue;}
</style>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).addClass('active');
});
</script>
I added .btn-default CSS class to the style.

You just need to add JQuery after loading the whole body.
I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style>
.active{background-color:red;}
</style>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
</script>
</body>
</html>

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.

Double clicking detected with jquery on click

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>

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>