问题描述
这就是我正在做的事情！我无法让它显示选中的第二个复选框上的提交按钮 - 它在第一个选中的复选框中工作正常，但在第二个复选框中没有 - 我希望它保持隐藏状态，直到选择第二个复选框 - 我希望这是有道理的 - 是为什么我不能让它在其他浏览器上运行？？？？？？？谁能帮帮我。
<!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>
解决方法
测试是否至少选中了两个复选框
代码笔链接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";
}
}