Develop Reference

Keep button in active state until clicked off

This is the page I'm working on: https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/
I want the buttons to stay in an active state until unclicked so that the user can clearly see what they have selected.
I have read and followed these instructions, to no avail: Keep button in active state until clicked upon again
NB: The 'button' used to be a toggle switch that I have turned off. Not sure if this is causing an issue.
I've added this JQuery to my theme:
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
As well as this CSS:
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<label class="bundled_product_optional_checkbox">
<input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
" Add for "
<span class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
</span>
</span>
::after
</label>
Appreciate any answers. Please be kind.

Just create your own class called active
<button class="Toggle Button">Toggle Button</button>
then create your own class active and style it in css
.active{
border: none;
background: teal;
color: white;
}
Now in jQuery toggle the active class on click
$('.toggle-button').click( function() {
$('.toggle-button').toggleClass('active');
});
Now you should have a working toggle switch
Here is the link to my code pen:
https://codepen.io/prabodhpanda/pen/pogNqpQ

answer updated..
if you are not using bootstrap then you can ignore those classes and CDN links : )
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>

How to change button color when radio input is selected, but input is wrapped in div before label?

I am trying to make our dinky radio buttons into lovely toggle buttons on our donation page. The HTML cannot be modified, and as it stands the inputs are wrapped in divs, then followed by the labels. I have zero knowledge of JS/jQuery and I imagine this task requires some.
Here is my fiddle: https://jsfiddle.net/cgz63qhd/
body {
padding: 10px;
font-family: sans-serif;
}
div.donation-levels {
margin: 3px 0;
}
.donation-level-container {
display: inline-block;
}
.donation-level-container input {
visibility: hidden;
}
.donation-level-amount-container {
text-align: center;
margin: 5px 2px;
padding: 0.7em 2em;
color: #ffffff;
background-color: #1a92b4;
border-radius: 5px;
display: inline-block;
cursor: pointer;
font-size: 22px;
}
.donation-level-amount-container:hover {
background: #e8525f;
color: #ffffff;
}
.donation-level-label-input-container input:checked~label {
background: #e8525f;
}
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
</div>
<label for="level_flexibleexpanded5942" onclick="">
<div class="donation-level-amount-container">
$35.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
</div>
<label for="level_flexibleexpanded5943" onclick="">
<div class="donation-level-amount-container">
$60.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
</div>
<label for="level_flexibleexpanded5944" onclick="">
<div class="donation-level-amount-container">
$120.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
</div>
</div>
Here is my inspiration donate page: https://action.audubon.org/donate/now
Alas, their labels are set up better so I think they were able to make the buttons with pure CSS (?).
My buttons currently are looking decent, are sized fine and colored nicely, but they just won't stay that coral color when clicked! Can someone help me out?
I've seen a lot of questions here on this topic but I can't seem to get anything to work.
I'm sure there are other issues in the code, please point them out if you see them!

$(".donation-level-amount-container").on("click", function() {
$('.donation-level-amount-container').each(function() {
$(this).removeClass('active');
});
$(this).toggleClass('active');
})
And css
.active {
background:#e8525f;
color:#ffffff;
}
Working fiddle:
https://jsfiddle.net/29exoa4k/2/

You need this piece of jQuery:
$(function() {
$(document).on('click','.donation-level-amount-container',function(){
$('.donation-level-amount-container').removeClass('active');
$(this).addClass('active');
});
});
Update also to this CSS:
.donation-level-amount-container:hover, .donation-level-amount-container.active {
background:#e8525f;
color:#ffffff;
}
Here is the updated jsfiddle.

You want something like this
$(".donation-level-amount-container").on("click", function() {
$(this).css("background", "red");
})
or to toggle an active class
$(".donation-level-amount-container").on("click", function() {
$(this).toggleClass("active");
})

You need this
$(".donation-level-amount-container").on("click", function() {
$(".donation-level-amount-container").css("background", "#1a92b4");
$(this).css("background", "#e8525f");
})
and css !important for background property
.donation-level-amount-container:hover {
background:#e8525f!important;
color:#ffffff;
}
here's your updated fiddle https://jsfiddle.net/cgz63qhd/3/

Indeed, this can not be done with pure CSS, since you can't traverse upward in the DOM using CSS selectors. As previous answers mentioned, it can easily be done with jQuery, but it can also be done in vanilla javascript.
var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';
donationButtons.forEach(function(btn){
btn.onclick = function(){
donationButtons.forEach(function(btn){
// deselect previously selected buttons
btn.style.background = defaultBg;
});
this.style.background = activeBg;
}
});
I'm certain this can be done smoother, but this is the first solution that popped up in my head.

Keeping style fixed to input until changed

I have this code at the moment (following on from earliers question):
input[type=submit]:focus {
background-color: yellow;
outline: none;
}
The problem however, is when I click anywhere else on the screen, the background colour reverts to normal. How can I get it to stay and only change if I click another button?
also a further question, how can I get one particular one to default to a colour when the page loads?
at the moment all the colours are black background until you click one, that turns it yellow and then clicking anywhere else on the page, turns that one back to black
pure JS solutions only please

If you want to change the background until it's changed again by another button, use JS to change the input background instead of just changing on focus. Either add an event listener or do it right from the HTML like:
<input type="submit" onclick="this.style.background='yellow';" />
Then do something similar for your other elements that you want to change the colors for. That way the color change will stay until another button changes it.

In your case, you have a css code, that changes the background of button when the button is focused. In order to make a default background of button, you should remove :focus selector.
input[type=submit] {
background-color: blue;
/* All buttons will be blue after page loaded */
outline: none;
}
input[type=submit]:focus {
background-color: yellow;
}
In your case, you need to change the background-color property using JavaScript.
Here is the working example. We set an active class to that button, which was recently clicked and remove active class from other buttons. You can make this in another way, but the logic is like so.
var buttons = document.querySelectorAll('input[type="button"]');
var resetBackgrounds = function() {
for (var i = 0; i < buttons.length; ++i)
buttons[i].className = '';
}
for (var i = 0; i < buttons.length; ++i) {
buttons[i].onclick = function() {
resetBackgrounds();
this.className = 'active';
}
}
input[type="button"] {
background-color: blue;
outline: none;
color: white;
}
input[type="button"].active {
background-color: black;
}
<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
<input type="button" value="Button4" />

Here's a solution in straight jquery:
$('input')
.on('click',function(){
$('input').css('background','')//reset color
$(this).css('background','yellow')//set color
})
input[type=submit]{
background-color: inherit;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />
the equivalent in js vanilla:
var inputs = Array.from(document.querySelectorAll('input'))
inputs.forEach(x => x.addEventListener('click', handler))
function handler(e) {
inputs.forEach(x => x.style.background = 'inherit')
e.target.style.background = 'yellow'
}
input[type=submit] {
background-color: inherit;
outline: none;
}
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />

<button> change color when clicked in HTML?

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?
Thanks in advance
This is the HTML code of my buttons.
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>

Pure CSS
Change your button to another element (like span)
Use a label and checkbox to control the toggle status
Use :checked CSS selector and + sibling selector
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</div>

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS
Try utilizing css :focus pseudo class , background-color
button {
background-color:yellow;
}
button:focus {
background-color:orange;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
no just the one that is clicked, but i want to be able to click on
many buttons not just one
var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
var color = window.getComputedStyle(this, null)
.getPropertyValue("background-color");
this.style.backgroundColor = color === "rgb(255, 255, 0)"
? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
};
};
button {
background-color:yellow;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>

You can do this with css a ::before pseudo element and the html checkbox input tag
input.toggle-btn {
visibility: hidden;
}
input.toggle-btn::before {
content: attr(value);
display: inline-block;
padding: 5px;
background: #fff;
font-size: 14pt;
color: #aaa;
border-radius: 5px;
border: 1px solid #aaa;
visibility: visible;
}
input.toggle-btn:checked::before {
background: rgb(50,150,250);
color: #eee;
border-color: #eee;
}
<input class="toggle-btn" type="checkbox" value="Hello">

This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.
$('.seatButton').click(function () {
$(this).toggleClass('activeClass');
});
Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!

No. You need to add/remove a class with javascript. To make #tpie feel better about himself, here is the code for that. Using jQuery:
$('.seatButton').on('click', function(){
$(this).toggleClass('is-active');
});

enabling a button after checking a checkbox

I have a submit button in my code, and its disabled.. I need it to be enable when the user clicks on the " I agree" check box.. I need it to be in jQuery.. can anyone help me with it? I'm writing my code in html, javascript and jquery..
<input id="agree" type="checkbox" name="agree" >I agree to the terms of service...<br> <br />
<div align="center">
<button style=" color: white; background-color: gray; width: 100px; height: 30px" type="submit" disabled ><b><font color="black">Register</font></b></button>
</div>

When the state of the checkbox changes, set the disabled property of the button based on the checkboxes' current state:
$('#agree').on('change', function() {
$('button').prop('disabled', !this.checked);
});
If you have multiple buttons on the page, the above will set the disabled property on all of them. If you need to get the next button relative to #agree, you'd have to traverse a little bit:
$('~ div:first', this).find('button').prop('disabled', !this.checked);
$('~ div:first', this) will get the first occurrence of a div which comes after this (#agree)
Here's a fiddle

You can use:
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
or:
$('#agree').click(function() {
$(this).next().find('input[type="submit"]').prop('disabled',!this.checked);
});

$('input[type="submit"]').removeAttr('disabled');

$("#checkBoxID").click(function() {
$("#buttonID").attr("disabled", !this.checked);
});
so in your case
$("#agree").click(function() {
$("button").attr("disabled", !this.checked);
});
Demo

I know you want a JS solution, but just to show a different approach, you can actually accomplish something similar in pure CSS.
Note you should also avoid using the font tag, and move your CSS from inline to a stylesheet.
Demo Fiddle
HTML
<input id="agree" type="checkbox" name="agree">I agree to the terms of service...
<div>
<button>Register</button>
<div></div>
</div>
CSS
div {
position:relative;
text-align:center;
}
div div {
height:100%;
position:absolute;
top:0;
left:0;
width:100%;
}
button {
background:grey;
color:#c0c0c0;
}
input[type=checkbox]:checked + div div {
display:none;
}
input[type=checkbox]:checked + div button {
background:#c0c0c0;
color:black;
}

Do like this
$('#agree').change(function() {
$('button[type=submit]').prop('disabled', !this.checked);
});

Try this..Property of button changes when Checkbox state is changed...
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
Demo Fiddle