Question

我在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>

Answer 1

尝试这个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>

Answer 2

您可以使用 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>

Answer 3

尝试此代码

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>

根据选定的单选按钮，显示两个必填字段

3 个答案: