HTML select’s don’t implement the readonly attribute, so the only way to prevent them from being edited is to use the disabled attribute. Doing so however prevents them from being posted on submission. The standard solution for this is create a hidden input field, which you have to keep in sync with the disabled select element. Finally, if your read-only status is dynamically changing based on the editable values in other fields, you’ll have to disable\/re-enable the proper fields on the client. AngularJS can be used to get some of this logic contained.<\/p>\n
Here’s an example:<\/p>\n
HTML:<\/p>\n
\r\n<div ng-app="app">\r\n\t<div ng-controller="dropdownController">\r\n\t\t<select name="cat" ng-model="cat" ng-options="item.value as item.label for item in cats" ng-disabled="catDisabled"> \r\n <\/select>\r\n\t\t<input name="cat" type="hidden" ng-disabled="!catDisabled" ng-model="cat">\r\n\t\t<input type="text" ng-model="cat"\/>\r\n <br\/>\r\n <label><input type="checkbox" ng-model="catDisabled"> Disable?<\/label>\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nangular.module('app', []).controller('dropdownController', function($scope){\r\n $scope.form = [];\r\n \r\n $scope.cats = [\r\n {value: 1, label: 'Mufasa'},\r\n {value: 2, label: 'Simba'},\r\n {value: 3, label: 'Scar'},\r\n {value: 4, label: 'Fluffy'}\r\n ];\r\n});\r\n<\/pre>\n