Search code examples
javascriptangularjscordovaonsen-ui

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";
}

Solution

  • 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.