CODEWITHSUNDEEP
javascriptangularjscordovaonsen-ui
Mihir Patel
Mihir Patel

Reputation: 486

Enabling/Disabling onsen Button

i want to enable/disable onsen buttons on click event of other button. i have used following code for that but it didn't worked for me. need suggestions/corrections for the same. 

 <ons-button id="save" disabled="true">Save</ons-button>
 <ons-button id="edit" ng-click ="edit_click()">Edit</ons-button>
 <ons-button id="cancel" disabled="true">Cancel</ons-button>

javascript : 

function edit_click(){ 
document.getElementById("save").disabled="false";
document.getElementById("cancel").disabled="false";
}

Upvotes: 2

Views: 2638

Answers (4)

Charitha Goonewardena
Charitha Goonewardena

Reputation: 4724

If you are using angular it is easy to do and reliable. Following code worked for me, check it out =)

html

<ons-button modifier="outline" style="width: 100%; ng-disabled="isDisable">Print</ons-button>

<ons-button modifier="outline" style="width: 100%; ng-disabled="isDisable">Email</ons-button>

js

//to disable
$scope.isDisable = true;

//to enable
$scope.isDisable = false;

Upvotes: 0

Harry Urcen
Harry Urcen

Reputation: 35

There is a proper example in angularjs doc with directive ng-disable: https://docs.angularjs.org/api/ng/directive/ngDisabled

You can try similar one with onsen:

<input type="checkbox" ng-model="checked"><br/>
<ons-button ng-model="button" disabled="{{checked}}">Button</button>

Upvotes: 0

Andreas Argelius
Andreas Argelius

Reputation: 3614

You can use ngAttrDisabled directive to disable buttons dynamically.

<ons-button ng-attr-disabled="{{ disableButton }}">Click me!</ons-button>
<input type="checkbox" ng-model="disableButton">

Unfortunately ngDisabled doesn't work in the current version of Onsen UI for the <ons-button> tag.

Upvotes: 3

Jordi Castilla
Jordi Castilla

Reputation: 26981

You are evaluating "false" string value not boolean value... 

function edit_click(){ 
    document.getElementById("save").disabled=false;
    document.getElementById("cancel").disabled=false;
}

Upvotes: 2

Related Questions