How to disable a button on a condition?

[class.button-disabled]=“true” is not working for me.
<button clear (click)=“myfunction(item)” [class.button-disabled]=“true”>

What version of Ionic are you using? Run ionic info from a terminal in your project folder to get this.

it says

Cordova CLI: 5.4.1
Ionic Version: 2.0.0-alpha.38
Ionic CLI Version: 2.0.0-alpha.25
Ionic App Lib Version: 2.0.0-alpha.24
ios-deploy version: Not installed
ios-sim version: 5.0.4
OS: Mac OS X Yosemite
Node Version: v5.1.1

do i need to upgrade?

Yeah, could you upgrade to the latest version? It’s 2.0.0-alpha.42. We have steps to upgrade here, since this was a large release: https://github.com/driftyco/ionic2/blob/master/CHANGELOG.md#steps-to-upgrade-to-alpha42

1 Like

thanku, it works now! i should keep checking the changelog for updates

Well, we manually updated the changelog, but hopefully we will have it auto generated soon. :smiley:

Unfortunately, in 2.0.0-alpha.57, when using

<button [class.button-disabled]="true">

the button still appears enabled. Is the problem back in this later Ionic version?

Here’s something that worked for me for dynamically disabling a button. In the HTML, put

<button disabled={{buttonDisabled}}>

and in your code, put

this.buttonDisabled = true;

to disable, or

this.buttonDisabled = null;

to enable.

(No idea why ‘this.buttonDisabled = false;’ does not enable the button but only ‘= null’ does).

This works well for me.

But if you see a more correct way, to dynamically enable/disable a button via code, please mention it here.

5 Likes

This perhaps is a better way to disable a button via js. If your button is part of a component, use

<button [disabled]="buttonDisabled">

and in the component class use

this.buttonDisabled = true;

to disable, or

this.buttonDisabled = false;

to enable.

This works now in Ionic version 2.0.0-alpha.57

6 Likes

how can I disable from event?

would following will work?

<button [disabled]="buttonDisabled" (click)="trigger($event)">

trigger ($event)
{
  $event.buttonDisabled = true; // ?
}

Thanks! This works great for me!

It’s not work for me

in HTML

```button (click)=“showCart()” disabled="{{isEmptyCart()}}">`

in TS

      isEmptyCart() {
            if (this.order.length==0) return true ;
                     return false ;
      }

But it’s disabled always! Why?

it’s work for me like this:

 <button (click)="showCart()" [disabled]="isEmptyCart()">
1 Like

I have a function that listens to keypresses

<ion-input  [(ngModel)]="data.token" name='token' type="text" style='width:100%' (keyup)="onVerifyChange($event)"></ion-input>
<button id="sendVerifyCode" ion-button block disabled="disabled">Verify</button>
(<HTMLInputElement> document.getElementById('server_token')).disabled=false;

This has worked for me. I would rather do something else but this seems to do the trick.

Because of this, which is why your next post solved the problem. You were inadvertently always interpolating a truthy string. That being said, dear future reader: please do not emulate the previous post. Direct DOM access in an Angular app should be kept to situations where there is no other option, and this is not one of those.

Thank you. I have modified my code to look like (I no longer use the DOM):

 onVerifyChange(e) {
        if (this.data.token.length == 6) {
            this.isenabled = true;
        }
        else {
            this.isenabled = false;
        }
}

and

 checkIsEnabled() {
        return !this.isenabled;
    }

so that this will work:

      <ion-item>
        <ion-label color="primary" floating >Enter your 6 Digit Code</ion-label>
        <ion-input  [(ngModel)]="data.token" ngDefaultControl name='token' type='number' block  (keyup)="onVerifyChange($event)"></ion-input>
      </ion-item>

      <button ion-button  block [disabled]="checkIsEnabled()" (click)="logToken()">Verify</button>
<button ion-button                                                     
             [attr.disabled]= "!button.disabled? true:null"
             type="text">
             {{button.label}}
</button>
1 Like

In case, you want to disable everything including event, please try below

E.g.

In Template html


<div class="app-services">
    <div class="app-service-item" *ngFor="let service of services" [attr.disabled]="isInActive? true:null" (click)="selectService(service.icon)">
        <ion-icon ios="ios-{{service.icon}}" md="md-{{service.icon}}"></ion-icon>
        <h5>{{service.title}}</h5>
    </div>
</div>

In .scss

 div.app-service-item[disabled]{       
        cursor: default;
         opacity: .4;
        pointer-events:none;
    }

[disabled]=“condition”

1 Like