Search code examples
jqueryangularjsonsen-ui

Disable button based on product availability

I need to disable the ons-button based on {{product.Availability}}, if it is 'Out of Stock',I need to disable the ons-button. How do I work it out. I'm using Onsen-UI framework. 

<div>
...
<tr><td align="left">Availability:</td><td align="left">{{product.Availability}}</td>
...
</div>
<ons-button modifier="large--cta">Add to Cart</ons-button>

Any help would be appreciated. Thank you guys.

Solution

  • For normal form elements ng-disabled can be used to disable them, however the <ons-button> tag doesn't implement ng-disabled but we can use ng-attr-disabled instead. Like this

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

    The button will be disabled when the checkbox is checked. The ng-disabled attribute will be added in the next version of Onsen UI.

    In your case you can do

    <div>
...
<tr><td align="left">Availability:</td><td align="left">{{product.Availability}}</td>
...
</div>
<ons-button modifier="large--cta" ng-attr-disabled="{{ product.Availability === 'Out of Stock' }}">Add to Cart</ons-button>

    I made a small example: http://codepen.io/argelius/pen/bNwWQz