How to add "Disabled" attribute to options in Ember.Select

Question

I have a Ember.Select view, how would i add/bind a disabled attribute to the option tag (NOT the entire select box).

ie, i would love 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 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.

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.

Ember.SelectOption.reopen({
  attributeBindings: ['value', 'selected', 'disabled'],

  disabled: function() {
    var content = this.get('content');
    return content.disabled || false;
  }.property('content'),

});

Here's a working jsbin. Note that the ipsum option is disabled.

Answer 2

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

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