如何聚焦或滚动到自定义复选框隐藏元素？

问题描述 投票：0回答：1

我有一个自定义卡复选框。如果它（卡复选框）是必需的并且未选中，我想将焦点和滚动到表单提交（表单正在使用 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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxMXx8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080&amp;utm_source=FormNX&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxN3x8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080&amp;utm_source=FormNX&amp;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 jquery-validate jquery-validation-engine
1个回答
0
投票

要获得您想要的解决方案：

  1. 使用有效的 jQuery 验证 CDN URL。

  2. 您正在通过 

    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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxMXx8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080&amp;utm_source=FormNX&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w2MzQzNzl8MHwxfHNlYXJjaHwxN3x8aW5kaWF8ZW58MHwwfHx8MTcyMTk5NzQ0M3ww&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080&amp;utm_source=FormNX&amp;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>

您也可以通过其他方式隐藏卡片复选框。

希望对您有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.