根據選定的單選按鈕，顯示兩個必填字段
[英]Display two fields as mandatory based on selected radio button
問題描述
我在HTML中有此單選按鈕。
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
${CVendor}
</label>
</div>
選中此選項后，以下兩個字段應顯示並且是必填字段。 如何用HTML實現呢？
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>
3 個解決方案
解決方案1
0 2019-06-19 09:10:26
試試這個ng-if="c.data.cvendor==='cvendor'" 。
單選按鈕將c.data.cvendor設置為“ cvendor”。 因此，您可以通過ng-if控制兩個輸入字段的顯示
至於必填字段，可以嘗試ng-required="true" 。
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
</div>
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
</div>
解決方案2
0 2019-06-19 09:22:19
您可以使用ng-required實現此目的。 基於“ c.data.fieldb”值，它將變為強制性或非強制性的。 同樣，對於隱藏和顯示，您可以使用ng-show / ng-hide 。
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>
解決方案3
0 2019-06-19 11:03:35
試試這個代碼
var checkBox; function DemoFunctin() { checkBox = document.querySelector('input[type="checkbox"]'); var textInput1 = document.querySelector('input[name="first"]'); var textInput2 = document.querySelector('input[name="second"]'); if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) { textInput1.setAttribute('required','required'); textInput2.setAttribute('required','required'); } else { textInput1.removeAttribute('required'); textInput2.removeAttribute('required'); } } if(checkBox){ checkBox.addEventListener('change',toggleRequired,false); }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3> <form> <p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p> <input type="text" name="first"/> <input type="text" name="second"/> <input type="submit" value="Submit" /> </form> </body> </html>
Rails 4形式：基於單選按鈕選擇的字段的條件顯示
[英]Rails 4 form: conditional display of fields based on radio button selection
如何在Codeigniter中使用一個提交按鈕以兩種形式驗證必填字段？
[英]How to validate mandatory fields in two forms with one submit button in codeigniter?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.