Want to add disabled attribute to options in Ember.Select? The Ember.Select view doesn’t do this out of the box. You will need to add a custom attribute binding for disabled and a corresponding computed property to tell Ember how to find it.
A simple approach is to add the disabled attribute on the content/data item used to render the select.
1 2 3 4 5 6 7 8 9 10 11 | App.ApplicationController = Ember.Controller.extend({ choices: function() { return [ Ember.Object.create({firstName: "Lorem", id: 1}), Ember.Object.create({firstName: "Ipsum", id: 2, disabled: true}), Ember.Object.create({firstName: "Dolor", id: 3}), Ember.Object.create({firstName: "Sit", id: 4}), Ember.Object.create({firstName: "Amet", id: 5}) ]; }.property() }); |
and reopen or extend the Ember.SelectOption view adding the disabled attribute and computed property.
1 2 3 4 5 6 7 8 9 | Ember.SelectOption.reopen({ attributeBindings: ['value', 'selected', 'disabled'], disabled: function() { var content = this.get('content'); return content.disabled || false; }.property('content'), }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
