gpt4 book ai didi

jquery - 如何启用基于 list 确认的提交按钮?

转载 作者:行者123 更新时间:2023-12-01 07:11:18 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的应用程序,仅当选中所有复选框时才启用提交按钮。基于对 this 的回答问题我写了下面的代码。但无法让它工作。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
validate();
$('#cond1, #cond2, #cond3').change(validate);
});

function validate(){
if ($('#cond1').val().length > 0 &&
$('#cond2').val().length > 0 &&
$('#cond3').val().length > 0) {
$('#subbtn').prop("disabled", false);
}
else {
$('#subbtn').prop("disabled", true);
}
}

</script>
</head>
<body>
<h2>Welcome</h2>
<h3>Please make sure that all the items are checked to enable proceed button</h3>
<form action="welcome.php" method="post">
<table align="center">
<tr>
<td>
v1
</td>
<td>
<h2><input type="checkbox" id="cond1" name="cond1" value="checked" ></h2>
</td>
</tr>
<tr>
<td>
v2
</td>
<td>
<input type="checkbox" id="cond2" name="cond2" value="checked" >
</td>
</tr>
<tr>
<td>
v3
</td>
<td>
<input type="checkbox" id="cond3" name="cond3" value="checked" >
</td>
</tr>
<tr>
<td style="text-align: center">
<input type="submit" value="Proceed" id="subbtn" name="subbtn" >
</td>
</tr>
</table>
</form>
</body>
</html>

最佳答案

仅当选中所有复选框时才启用提交按钮。

您需要使用:checked选择器和 .is()

function validate() {
if ($('#cond1').is(':checked') &&
$('#cond2').is(':checked') &&
$('#cond3').is(':checked') ) {
$('#subbtn').prop("disabled", false);
} else {
$('#subbtn').prop("disabled", true);
}
}

$(document).ready(function() {
validate();
$('#cond1, #cond2, #cond3').change(validate);
});

function validate() {
if ($('#cond1').is(':checked') &&
$('#cond2').is(':checked') &&
$('#cond3').is(':checked')) {
$('#subbtn').prop("disabled", false);
} else {
$('#subbtn').prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Welcome</h2>
<h3>Please make sure that all the items are checked to enable proceed button</h3>
<form action="welcome.php" method="post">
<table align="center">
<tr>
<td>
v1
</td>
<td>
<h2><input type="checkbox" id="cond1" name="cond1" value="checked" ></h2>
</td>
</tr>
<tr>
<td>
v2
</td>
<td>
<input type="checkbox" id="cond2" name="cond2" value="checked">
</td>
</tr>
<tr>
<td>
v3
</td>
<td>
<input type="checkbox" id="cond3" name="cond3" value="checked">
</td>
</tr>
<tr>
<td style="text-align: center">
<input type="submit" value="Proceed" id="subbtn" name="subbtn">
</td>
</tr>
</table>
</form>

关于jquery - 如何启用基于 list 确认的提交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26546284/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com