多单选按钮表单，默认不可提交，选中后提交
多单选按钮表单，默认不可提交，选中后提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多组 radio 表单</title>
</head>
<body>
<form id="myForm">
<h3>组1:</h3>
<input type="radio" name="group1" value="option1"> 选项1<br>
<input type="radio" name="group1" value="option2"> 选项2<br>
<h3>组2:</h3>
<input type="radio" name="group2" value="optionA"> 选项A<br>
<input type="radio" name="group2" value="optionB"> 选项B<br>
<input type="submit" id="submitBtn" disabled>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 检测单选按钮状态
function checkRadioButtons() {
var group1Checked = $('input[name="group1"]:checked').length > 0;
var group2Checked = $('input[name="group2"]:checked').length > 0;
$('#submitBtn').prop('disabled', !(group1Checked && group2Checked));
}
// 当单选按钮状态改变时触发
$('input[type="radio"]').change(checkRadioButtons);
// 初始化时检查一次
checkRadioButtons();
});
</script>
</body>
</html>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员！
WordPress外贸建站 » 多单选按钮表单，默认不可提交，选中后提交
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员！
WordPress外贸建站 » 多单选按钮表单，默认不可提交，选中后提交
