多单选按钮表单,默认不可提交,选中后提交
多单选按钮表单,默认不可提交,选中后提交
<!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外贸建站 » 多单选按钮表单,默认不可提交,选中后提交