从选择下拉列表中选择选项时禁用其他字段

时间:2014-09-25 10:21:43

标签: javascript html angularjs ionic-framework

我正在处理一个表单并且它有一个选择dropdown.in该下拉列表显示了几个选项。如果从下拉列表中选择了某个选项,我想禁用某些字段。

例如在我的交易类型中,如果我选择“在公司内”选项,我想要禁用以下所有字段(“选择银行”,“分行名称”,“资金转移备注”)。

怎么做?我尝试了一些但没有用。我会在这里发布

表格

    <ion-content  class="has-header" scroll="true" padding="true">
        <form id="myForm">

                    <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>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>Transaction Type</b></h4></label>
                    <select id="transtype"   style="margin: auto; width:100%; " ng-model="data.transtype" ng-options="type.type for type in types" ng-change="hideFields()">
                    <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" ng-disabled="disableFields">
                    <option value="" selected="selected">--Select Bank--</option>
                    </select>
                    <br><br>



                    <label><h4><b>Branch Name</b></h4></label>
                    <select id="bname"   style="margin: auto; width:100%; " ng-model="data.bname" ng-options="bname.bname for bname in bname" ng-disabled="disableFields">
                    <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">


                    <ion-checkbox ng-model="isChecked">Save as beneficiary</ion-checkbox>

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

myController的

.controller('thirdpartyTransferCtrl', ['$scope','$rootScope', 'checkEmptyObjects', 'refreshTextFields', '$http', '$ionicPopup', 'ApplicationSettings', function($scope, $rootScope, checkEmptyObjects, refreshTextFields, $http,  $ionicPopup, ApplicationSettings) {

                                        $scope.hideFields = function() {
                                                if($scope.transtype == "Within Company") {
                                                $scope.disableFields = true;
                                                }
                                                else{
                                                $scope.disableFields = false;
                                                }
                                                };

                                        $scope.types = [
                                                { type: 'Within Company' },
                                                { type: 'SLIPS Transction'  },
                                                { type: 'CEFT Transction'  },

                                                 ];

                                        $scope.banks = [
                                                { bank: 'Sampath Bank' },
                                                { bank: 'Seylan Bank'  },
                                                { bank: 'BOC'  },

                                                 ];

                                        $scope.bname = [
                                                { bname: 'Colombo 05' },
                                                { bname: 'Colombo 06'  },
                                                { bname: 'Colombo 07'  },
                                                { bname: 'Wanathamulla'  },

                                                 ];

                                        }])

1 个答案:

答案 0 :(得分:1)

确保添加ng-disabled =&#34; disableFields&#34;到所有领域(在资金转移备注上缺失)然后改变

if($scope.transtype == "Within Company") {

if($scope.data.transtype.type == "Within Company") {