根据选定的单选按钮将两个字段显示为必填字段答案

【问题标题】：Display two fields as mandatory based on selected radio button根据选定的单选按钮将两个字段显示为必填字段
【发布时间】：2019-06-20 16:35:57
【问题描述】：

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

【问题讨论】：

查看example
默认隐藏这些字段吗？

标签： javascript html angularjs

【解决方案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>

【讨论】：

【解决方案2】：

试试这个代码

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】：

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

【讨论】：