如题，AngularJS可以给元素设置disabled属性，当为true时，为不可点击，但实际运行时，不能点击，并没有明显的区别，会产生误解，所以需要元素为不可点击时候，就要设置区分的背景颜色，主要是使用ng-class属性，可以根据是否是disabled来决定加载哪个class样式，参考网址：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html，还有这个网址：https://www.oschina.net/question/1053626_241643，如下是我的测试的代码：
<!DOCTYPE html> <html> <Meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <head> <style> .sky { color:white; background-color:lightblue; } .tomato { background-color:coral; } </style> </head> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <div class="item"> <label class="list_tit">是否男女</label> <div class="item_input"> <label class="perq" for="amrys_y"><input ng-model="amrys" ng-change="changeArmyType(amrys)" id="amrys_y" name="amrys" type="radio" value="true" />是</label> <label class="perq" for="amrys_n"><input ng-model="amrys" ng-change="changeArmyType(amrys)" id="amrys_n" name="amrys" type="radio" ng-checked="true" value="false" />否</label> </div> </div> <div class="item"> <label class="list_tit">技能</label> <div class="item_input"> <select ng-model="armyType" ng-disabled="armyTypeBool"> <option value="">请选择</option> <option value="1">打仗</option> <option value="2">搬东西</option> </select> </div> </div> <!-- 作者：qiulinhe 时间：2017-03-31 描述：监听下拉框，然后控制级联的编辑框不可以编辑 --> <div class="item"> <label class="list_tit">政治面貌</label> <div class="item_input"> <select ng-model="zzmmType" ng-init="zzmmType=2" ng-change="changeZzmmType(zzmmType)"> <option value="" >请选择</option> <option value="2" >群众</option> <option value="1" ng-selected="true">党员</option> </select> </div> </div> <div class="item"> <label >入党时间</label> <div > <input class="rudang" id="joinParty" ng-disabled="joinBool" ng-class="{true: 'sky',false: 'tomato'}[joinBool]" ng-model="joinParty" placeholder="请输入入党时间" /> </div> </div> </div> <script> var app = angular.module('myApp',[]); app.controller('namesCtrl',function($scope,$location,$http,$timeout) { $scope.armyTypeBool = true; //只有是否男女选中了是，才能选男女类型 $scope.changeArmyType = function(x) { x == 'true' ? x = false : x = true; $scope.armyTypeBool = x; } $scope.joinBool=false; $scope.changeZzmmType = function(type) { $scope.joinBool=type==1?false:true; } }); </script> </body> </html>
运行结果为：
