我有一个自定义卡复选框。如果它(卡复选框)是必需的并且未选中,我想将焦点和滚动到表单提交(表单正在使用 jQuery 验证进行验证)到此卡复选框。如何做到这一点?任何建议和帮助将不胜感激。提供以下代码-
$(document).ready(function() {
$("#form").validate();
$("#form").on("submit", function(event) {
if (!$(this).valid()) {
event.preventDefault(); // Prevent form submission if invalid
}
});
});
.image-checkbox .form-check-input:checked+.form-check-label .checkmark {
visibility: visible;
}
.image-checkbox .form-check-label .description {
font-size: 14px;
}
.mb-1-33rem {
margin-bottom: 1.33rem;
}
.image-checkbox img.option-img-small {
width: 100% !important;
}
.image-checkbox img.option-img-medium {
width: 100% !important;
}
.image-checkbox img.option-img-large {
width: 100% !important;
}
.option-card-small {
width: 12rem !important;
max-width: 100%;
}
.option-card-medium {
width: 18rem !important;
max-width: 100%;
}
.option-card-large {
width: 24rem !important;
max-width: 100%;
}
@media (max-width: 576px) {
.option-card-small,
.option-card-medium,
.option-card-large {
width: 100% !important;
}
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
border-radius: 12px !important;
}
.image-checkbox .form-check-label {
position: sticky !important;
display: flex !important;
align-items: start !important;
flex-direction: column !important;
cursor: pointer;
gap: 1.4rem !important;
}
.image-checkbox .form-check-label .checkmark {
position: absolute;
//top: -27px !important;
//left: -24px !important;
top: -12px !important;
left: -12px !important;
color: #24ae61 !important;
font-size: 24px;
visibility: hidden;
}
.image-checkbox .form-check-input:checked+.form-check-label img {
//border: 2px solid #23ad60 !important;
}
.option-card-small:has(.form-check-input:checked) {
border: 2px solid #23ad60 !important;
}
.image-checkbox .form-check-input {
display: none;
}
.option-card-small,
.option-card-medium,
.option-card-large {
border-radius: 0.8rem;
position: relative;
transition: transform 0.3s ease-in-out;
}
.option-card-small:hover,
.option-card-medium:hover,
.option-card-large:hover {
transform: scale(1.02);
}
.option-title {
font-size: 1.2rem;
font-weight: 600;
}
.option-description {
font-size: 1rem;
font-weight: 600;
}
.image-container {
height: 200px;
/* width: 300px;
background-color: red; */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 10px;
}
.image-container img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
<div class="card mb-2" style="background-color: rgb(255, 255, 255);">
<div class="card-body">
<form id="form" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field_6" class="form-label">
<span>Multiple Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="xxx" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="xxx" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1506461883276-594a12b11cf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxMXx8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="yyy" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="yyy" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1528034342377-c406327f14b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxN3x8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span style=""><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong></span></p>
</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_2" class="form-label">
<span>Multiple Choice 3</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="zzz" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="zzz" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="aaa" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="aaa" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_13" class="form-label">
<span>
Short Text (Input)
</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="input-group">
<!----><input type="text" name="field_13" required="required" id="field_13" data-msg-required="This field is required" data-rule-startswith="hello" data-msg-startswith="should starts with hello" class="form-control">
<!---->
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_1" class="form-label">
<span>Single Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_1_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_1_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_4" class="form-label">
<span>Multiple Choice 2</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_4_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_4_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_15" class="form-label">
<span>Single Choice (Radio)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_15_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_15_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_16" class="form-label">
<span>Multiple Choice (Checkbox)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_16_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_16_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
</div>
<!---->
<div class="row mt-4 mb-2">
<div class="col-md-12 gap-2 justify-content-center d-flex">
<!---->
<!---->
<button type="submit" class="btn submit_btn ladda-button btn-primary col-6">
<!----> <span class="btn_text ladda-label"> Submit </span>
<!---->
</button>
</div>
<!---->
</div>
</form>
</div>
</div>
</div>
</div>
</div>
要获得您想要的解决方案:
使用有效的 jQuery 验证 CDN URL。
您正在通过
display: none;
隐藏您的复选框,因此它不再是 DOM 的一部分,因此请尝试用其他方式隐藏您的自定义复选框。
下面分享一种无需使用
<input type="checkbox">
即可隐藏
display: none;
的方法
$(document).ready(function() {
$("#form").validate();
$("#form").on("submit", function(event) {
if (!$(this).valid()) {
event.preventDefault(); // Prevent form submission if invalid
}
});
});
.image-checkbox .form-check-input:checked+.form-check-label .checkmark {
visibility: visible;
}
.image-checkbox .form-check-label .description {
font-size: 14px;
}
.mb-1-33rem {
margin-bottom: 1.33rem;
}
.image-checkbox img.option-img-small {
width: 100% !important;
}
.image-checkbox img.option-img-medium {
width: 100% !important;
}
.image-checkbox img.option-img-large {
width: 100% !important;
}
.option-card-small {
width: 12rem !important;
max-width: 100%;
}
.option-card-medium {
width: 18rem !important;
max-width: 100%;
}
.option-card-large {
width: 24rem !important;
max-width: 100%;
}
@media (max-width: 576px) {
.option-card-small,
.option-card-medium,
.option-card-large {
width: 100% !important;
}
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
}
.image-checkbox .form-check-label img {
border: 2px solid transparent;
margin-right: 0px !important;
border-radius: 12px !important;
}
.image-checkbox .form-check-label {
position: sticky !important;
display: flex !important;
align-items: start !important;
flex-direction: column !important;
cursor: pointer;
gap: 1.4rem !important;
}
.image-checkbox .form-check-label .checkmark {
position: absolute;
//top: -27px !important;
//left: -24px !important;
top: -12px !important;
left: -12px !important;
color: #24ae61 !important;
font-size: 24px;
visibility: hidden;
}
.image-checkbox .form-check-input:checked+.form-check-label img {
//border: 2px solid #23ad60 !important;
}
.option-card-small:has(.form-check-input:checked) {
border: 2px solid #23ad60 !important;
}
/*
.image-checkbox .form-check-input {
display: none;
}
*/
/*Hiding your custom card checkboxes*/
.image-checkbox .form-check-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.option-card-small,
.option-card-medium,
.option-card-large {
border-radius: 0.8rem;
position: relative;
transition: transform 0.3s ease-in-out;
}
.option-card-small:hover,
.option-card-medium:hover,
.option-card-large:hover {
transform: scale(1.02);
}
.option-title {
font-size: 1.2rem;
font-weight: 600;
}
.option-description {
font-size: 1rem;
font-weight: 600;
}
.image-container {
height: 200px;
/* width: 300px;
background-color: red; */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 10px;
}
.image-container img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
<div class="card mb-2" style="background-color: rgb(255, 255, 255);">
<div class="card-body">
<form id="form" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field_6" class="form-label">
<span>Multiple Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="xxx" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="xxx" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1506461883276-594a12b11cf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxMXx8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_6[]" id="yyy" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="yyy" class="form-check-label d-flex flex-column align-items-center pt-3 gap-0 pb-3">
<div class="m-auto img-container"><img src="https://images.unsplash.com/photo-1528034342377-c406327f14b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxN3x8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&ixlib=rb-4.0.3&q=80&w=1080&utm_source=FormNX&utm_medium=referral" class="img-fluid option-img-medium"> <i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1 pb-1">
<div class="option-title ps-3 pe-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">
<p><span style=""><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong></span></p>
</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_2" class="form-label">
<span>Multiple Choice 3</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<!---->
<!---->
<div class="row d-flex flex-wrap">
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="zzz" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="zzz" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
orem ipsum, or lipsum as it is sometimes known
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="d-flex mb-3 col-md-6">
<div class="option-with-card option-card-medium shadow-sm border">
<div class="image-checkbox">
<input type="checkbox" required name="field_2[]" id="aaa" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="aaa" class="form-check-label d-flex flex-column align-items-center gap-0 pb-3">
<div><i class="fas fa-check-circle checkmark"></i></div>
<div class="option flex-grow-1">
<div class="option-title p-3">
Option-2
<!---->
</div>
</div>
<div class="option-description small fw-light px-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_13" class="form-label">
<span>
Short Text (Input)
</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="input-group">
<!----><input type="text" name="field_13" required="required" id="field_13" data-msg-required="This field is required" data-rule-startswith="hello" data-msg-startswith="should starts with hello" class="form-control">
<!---->
</div>
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_1" class="form-label">
<span>Single Choice 1</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_1_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_1" id="field_1_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_1_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_4" class="form-label">
<span>Multiple Choice 2</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_orem ipsum, or lipsum as it is sometimes known" data-msg-required="This field is required" class="form-check-input" value="orem ipsum, or lipsum as it is sometimes known">
<label for="field_4_orem ipsum, or lipsum as it is sometimes known" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
orem ipsum, or lipsum as it is sometimes known
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_4[]" id="field_4_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_4_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<div class="option-description small fw-light pt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_15" class="form-label">
<span>Single Choice (Radio)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_15_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="radio" required="required" name="field_15" id="field_15_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_15_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="field_16" class="form-label">
<span>Multiple Choice (Checkbox)</span> <span style="color: rgb(169, 68, 66);">*</span>
<!---->
<!---->
</label>
<!---->
<div class="row">
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-1" data-msg-required="This field is required" class="form-check-input" value="Option-1">
<label for="field_16_Option-1" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-1
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div>
<div class="form-check">
<input type="checkbox" required="required" name="field_16[]" id="field_16_Option-2" data-msg-required="This field is required" class="form-check-input" value="Option-2">
<label for="field_16_Option-2" class="form-check-label d-flex flex-column justify-content-sm-start">
<div class="option">
<span class="option-title">
Option-2
<!---->
</span>
</div>
<!---->
</label>
</div>
</div>
</div>
</div>
<!---->
<!---->
<div>
<div class="form-text">
<!---->
<!---->
</div>
<!---->
<!---->
</div>
<!---->
</div>
</div>
</div>
<!---->
<div class="row mt-4 mb-2">
<div class="col-md-12 gap-2 justify-content-center d-flex">
<!---->
<!---->
<button type="submit" class="btn submit_btn ladda-button btn-primary col-6">
<!----> <span class="btn_text ladda-label"> Submit </span>
<!---->
</button>
</div>
<!---->
</div>
</form>
</div>
</div>
</div>
</div>
</div>
您也可以通过其他方式隐藏卡片复选框。
希望对您有帮助