Disable button programmatically

help
1 
<template name="productForAuction">
{{> coin}}
<hr/>
<hr/>
<ul>
    {{#each product}}

        <div class="product {{selectedClass}} ">
            Product : {{ name }} <br/>
            Price   : {{ price }}<br/>
            winner  : {{ winner }}<br/>
            time    : {{ time }}<br/>
            Time left to BID: {{> timeleft}} <br/>
            <input type="button" class="increment" value="Bid Now">

        </div>
        <br/>
    {{/each}}

    <hr/>

</ul></template>

I want the button(increment class) to be disabled if the timeleft template returns 0. the below snippet is the timeleft template.

<template name="timeleft">
    {{ left _id }}
</template>

please don’t make confusion with the template. there is a space between left and _id. The helper is

Template.timeleft.helpers({
'left' : function(sessionKey){
    return Session.get(sessionKey);
}});
2

You could use viewmodel for that, have left be a property on the viewmodel i.e. you wouldn’t even need a template :smile:

3

You just need to add a helper into the button HTML:

<input type="button" class="increment" value="Bid Now" {{isDisabled}}>

Then some JS like so:

Template.productForAuction.helpers({
'isDisabled' : function(){
    return (this.timeleft == 0) ? {disabled: 'disabled'} : {} ;
}});

You might need to tweak this.timeleft to be whatever returns how much time is left for that object.

1 Like