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

disable fields when selecting a item from dropdown in html

本文关键字：项目 字段 选择 html 下拉列表      更新时间：2023-09-26

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

例如，如果我从交易类型中选择"公司内部"选项，那么下面的所有其他字段都应该被禁用（不应该能够输入数据）。我怎样才能做到这一点？

在这里我会张贴我的代码

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

禁用使用ng//////

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

控制器内

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

可视

<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

相关文章：