我有一个简单的 form，它有 2 个 checkboxes。如果选中任何一个复选框，我想提交表单。下面的代码需要检查它们。我尝试使用 name 属性对复选框进行分组，但这还不够，我遗漏了一些东西。我们如何将复选框分组以进行验证，以便如果选择了任何一个，则应提交表单。任何建议都会有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
<label class="form-check-label" for="Check2">Option 2</label>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
最佳答案
试试下面的方法。
本质上，它根据是否至少选中了一个复选框来动态启用或禁用 required 属性。然后浏览器验证正常运行。但是，通过只包含一个 invalid-feedback div，您只会在每个“复选框组”中看到一个警告。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
<label class="form-check-label" for="Check2">Option 2</label>
<div class="invalid-feedback">Choose at least one.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
var failed = false;
if ($("[name='select']:checked").length == 0) {
$("[name='select']").attr('required', true);
failed = true;
}
else {
$("[name='select']").attr('required', false);
}
if (form.checkValidity() === false) {
failed = true;
}
if (failed == true) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
关于javascript - 如何在 Bootstrap 中对复选框进行分组以进行验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48785768/