Here's what I'm working on! i cant get it to show the submit button on the 2nd checkbox checked - it works just fine on the 1st one checked but not the 2nd one - i want it to stay hidden until a 2nd checkbox is selected -i hope that makes sense - is there a reason why i cant get this to run on other browsers??????? can anyone help me please.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
font-family:'Lato', sans-serif;
}
.button-orange {
text-shadow: 2px 2px #321;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
border-radius: 5px;
box-shadow: 0px 0px 10px 3px #999;
cursor:pointer;
background-color: #E74700;
color:white;
font-size:34px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
.button-orange:hover {
background-color: red;
}
.button-grey {
text-shadow: 2px 2px #321;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
border-radius: 5px;
box-shadow: 0px 0px 10px 3px #999;
cursor:pointer;
background-color: #999;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
</style>
</head>
<body>
<p>is there a way to unhide the submit button when any 2nd number is checked???</p>
<form action="/action_page.php" method="get">
<input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />01
<input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />02
<input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />03
<input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />04
<br><br><br>
<input disabled="disabled" type="button" id="accept" class="button-grey" value=" SUBMIT "
onclick="getElementById('accept')">
</form>
<script>
function checkedChanged(element) {
var myLayer = document.getElementById('accept');
if (element.checked == true) {
myLayer.className = "button-orange";
myLayer.disabled = "";
} else {
myLayer.className = "button-grey";
myLayer.disabled = "disabled";};}
var checked_val = "null";
$(".no_option").on("click", function(){
if($(this).val() == checked_val){
$('input[name=group][value=null]').prop("checked",true);
checked_val = "null";
}else{
checked_val = $(this).val();
}
});
</script>
</body>
</html>
Test if at least two checkboxes are selected
code pen link https://codepen.io/pranaynailwal/pen/oNBXWgR
function checkedChanged() {
var inputs = document.getElementsByTagName("input");
var myLayer = document.getElementById('accept');
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
count++;
}
}
if (count >= 2) {
myLayer.className = "button-orange";
myLayer.disabled = "";
} else {
myLayer.className = "button-grey";
myLayer.disabled = "disabled";
}
}