如何在引導程序中驗證樣式為= display：none的復選框？

Question

我想選中一個復選框作為必填字段。 但是我使用display:none CSS隱藏了該復選框。 這樣就不會顯示引導表單驗證錯誤消息。 如何顯示錯誤消息？

 input[type=checkbox] { display: none; } .option-input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 40px; width: 40px; transition: all 0.15s ease-out 0s; border: none; color: #fff; cursor: pointer; display: inline-block; margin-right: 0.5rem; outline: none; position: relative; z-index: 1000; } 

 <input class="option-input" id="feature-checkbox1" type="checkbox" name="features[]" value="E-mail Login" /> <label class="feature-label" for="feature-checkbox1"> <div id="feature-card" class="card" data-option-id="101" data-name="E-mail Login" data-price-min="200" data-price-max="400"> <div class="card-content text-center"> <i id="feature-icon" class="fa fa-envelope"></i> <p>Login</p> </div> </div> </label> 

Answer 1

添加.control-label類以使用.input-group類在div中標記和包裝元素（復選框和標簽）。

現在在輸入組div上添加.has-error會將其變為紅色。

使用jquery或javascript驗證復選框。

希望這可以幫助..