diff --git a/ionic/components/select/select.scss b/ionic/components/select/select.scss index 62034fa479..6bcd50f912 100644 --- a/ionic/components/select/select.scss +++ b/ionic/components/select/select.scss @@ -20,4 +20,10 @@ ion-select { .item-multiple-inputs ion-select { position: relative; +} + +.select-disabled, +.item-select-disabled ion-label { + opacity: 0.4; + pointer-events: none; } \ No newline at end of file diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts index c91df9f72c..5f7cbaefbc 100644 --- a/ionic/components/select/select.ts +++ b/ionic/components/select/select.ts @@ -101,7 +101,9 @@ import {Option} from '../option/option'; '
' + '
' + '
' + - '', @@ -127,7 +129,6 @@ export class Select { @Input() okText: string = 'OK'; @Input() alertOptions: any = {}; @Input() checked: any = false; - @Input() disabled: boolean = false; @Output() change: EventEmitter = new EventEmitter(); @@ -161,10 +162,12 @@ export class Select { */ @HostListener('click', ['$event']) private _click(ev) { - console.debug('select, open alert'); ev.preventDefault(); ev.stopPropagation(); + if (this._disabled) return; + console.debug('select, open alert'); + // the user may have assigned some options specifically for the alert let alertOptions = merge({}, this.alertOptions); @@ -228,8 +231,10 @@ export class Select { set value(val: any) { // passed in value could be either an array, undefined or a string - this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); - this.updateOptions(); + if (this._disabled) { + this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); + this.updateOptions(); + } } get text() { @@ -274,6 +279,16 @@ export class Select { }); } + @Input() + get disabled() { + return this._disabled; + } + + set disabled(val) { + this._disabled = isTrueProperty(val); + this._item && this._item.setCssClass('item-select-disabled', this._disabled); + } + /** * @private * Angular2 Forms API method called by the model (Control) on change to update diff --git a/ionic/components/select/test/multiple-value/main.html b/ionic/components/select/test/multiple-value/main.html index 3306f0295d..f2ffdcf7df 100644 --- a/ionic/components/select/test/multiple-value/main.html +++ b/ionic/components/select/test/multiple-value/main.html @@ -39,6 +39,13 @@ + + Disabled + + Selected Text + + +