How to add the "Disabled" attribute to parameters in Ember.Select

Question

I have a view of Ember.Select, how to add / bind a disabled attribute to an options tag (NOT the entire selection field).

those. I would like to accomplish the following result.

<select> <option value="1" disabled>I am a disabled option</option> <option value="2">Im selectable</option> </select> 

Answer 1

The view Ember.Select does not do this out of the box. You will need to add a custom attribute binding for disabled and the corresponding computed property to tell Ember how to find it.

A simple approach is to add a disabled attribute to the content / data element used to render the selection.

 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 expand the Ember.SelectOption by adding the disabled attribute and the computed property.

 Ember.SelectOption.reopen({ attributeBindings: ['value', 'selected', 'disabled'], disabled: function() { var content = this.get('content'); return content.disabled || false; }.property('content'), }); 

This is where jsbin works. Note that the ipsum parameter ipsum disabled.

Answer 2

You can handle it in didInsertElement in your custom Ember.Select .

 didInsertElement: function () { this.$('option[value="1"]').attr('disabled', true); }