javascript - 从 html 的下拉列表中选择项目时禁用字段

Question

我正在尝试制作一个表格，到目前为止我已经完成了所需的一切。但问题是我想在从选择下拉列表中选择项目时禁用多个字段。

例如，如果我从交易类型中选择“公司内部”选项，则应禁用下面的所有其他字段(不应输入数据)。我怎样才能实现这个目标？

在这里我将发布我的代码

<ion-content  class="has-header" scroll="true" padding="true">
<form id="myForm">
   <label><h4><b>Source Account Number</b></h4></label>
   <select id="originAcc"   style="margin: auto; width:100%; " ng-model="data.origin" ng-options="account.account for account in accountsArr">
       <option value="" selected="selected">--Select Account--</option>
   </select><br><br>

<label><h4><b>Transfer Amount</b></h4></label>
<input type="number"  id="amount" name="amount" ng-model="data.amount" class="item-input-wrapper" decimal-places onkeypress='return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46'>
<br>  

<label><h4><b>Beneficiary Account Number</b></h4></label>
<input type="text"  id="beneAcc" name="beneAcc" ng-model="data.beneAcc"  class="item-input-wrapper" >
<br>

<label><h4><b>Beneficiary Name</b></h4></label>
<input type="text" id="beneName" name="beneName" ng-model="data.beneName"  class="item-input-wrapper" >
<br>
<label><h4><b>Transaction Type</b></h4></label>
<select id="transtype"   style="margin: auto; width:100%; " ng-model="transtype" ng-options="type.type for type in types">
   <option value="" selected="selected">--Select Transaction Type--</option>
</select>
<br><br>

<label><h4><b>Select Bank</b></h4></label>
<select id="beneBank"   style="margin: auto; width:100%; " ng-model="data.beneBank" ng-options="bank.bank for bank in banks">
  <option value="" selected="selected">--Select Bank--</option>
</select>
<br><br>

<label><h4><b>Branch Name</b></h4></label>
<select id="beneBank" style="margin:auto; width:100%;" ng-model="data.beneBank" ng-options="bname.bname for bname in bname">
     <option value="" selected="selected">--Select Branch Name--</option>
 </select>
 <br><br>   

<label><h4><b>Fund Transfer Remarks</b></h4></label>
<input type="text"  id="narration" name="narration" ng-model="data.narration" class="item-input-wrapper">

<input type="checkbox" name="option1" value="beneficiary"> Save as beneficiary<br><br>

<div class="col" style="text-align: center">
                    <button align="left" class="button button-block button-reset" style="display: inline-block;width:100px;text-align:center " ng-click="reset()" padding-top="true">Reset</button>

                    <button class="button button-block button-positive"  style="display: inline-block;width:100px;margin-left:auto; margin-right:auto; " ng-click="thirdPartySubmit(data)" padding-top="true" >Transfer</button>
                    </div>

        </form>

    </ion-content>
</ion-view>

Answer 1

使用 ng-disabled//////

<select id="transtype"   style="margin: auto; width:100%; " ng-model="transtype" ng-options="type.type for type in types" data-ng-change="hideFields()">
                <option value="" selected="selected">--Select Transaction Type--</option>

在 Controller 中

$scope.hideFields = function() {
    if($scope.transtype == "within company") {
         $scope.disableFileds = true;
    }
}

在 View 中

<input type="text"  id="beneAcc" name="beneAcc" ng-model="data.beneAcc"  class="item-input-wrapper" ng-disabled="disableFileds">

//这样做可以禁用字段

/////////////////// https://docs.angularjs.org/api/ng/directive/ngDisabled