CODEWITHSUNDEEP
knockout.js
Wade73
Wade73

Reputation: 4509

Disable Input based on Other Inputs Knockoutjs

I am trying to setup a knockout observable that will disable an input, if two other inputs are not both between 1 and 30. Right now when I run the code in jsFiddle, my input is disabled. Unfortunately, I am never able to reenable the input. Here is the code on jsFiddle Thanks for any help.

HTML

<!-- This is a *view* - HTML markup that defines the appearance of your
UI -->
<p>Alcohol Days:
    <input data-bind="value: alcoholDays" />
</p>
<p>Alcohol 5+ Days:
    <input data-bind="value: alcoholFivePlusDays" />
</p>
<p>Alcohol 4- Days:
    <input data-bind="value: alcoholFourLessDays" />
</p>
<p>Drug Days:
    <input data-bind="value: drugDays" />
</p>
<p>Both Days:
    <input data-bind="value: bothDays, enable: enableBothDays" />
</p>
<p>Enable Both Days: <strong data-bind="text: enableBothDays"></strong>

</p>
<p>Alcohol Days: <strong data-bind="text: alcoholDays"></strong>

</p>
<p>Drug Days: <strong data-bind="text: drugDays"></strong>

</p>
<button data-bind="click: capitalizeLastName">Go caps</button>

javascript

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {

    var self = this;

    self.alcoholDays = ko.observable("");
    self.alcoholFivePlusDays = ko.observable("");
    self.alcoholFourLessDays = ko.observable("");
    self.drugDays = ko.observable("");
    self.bothDays = ko.observable("");

    self.enableBothDays = ko.computed(function () {

        if ((parseInt(self.alcoholDays) > 0 && parseInt(self.alcoholDays) <= 30) && (parseInt(self.drugDays) > 0 && parseInt(self.drugDays) <= 30)) {
            return true;
        } else {
            return false;
        }

    }, self);

}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Wade

Upvotes: 1

Views: 1840

Answers (3)

Brian Fitzpatrick
Brian Fitzpatrick

Reputation: 357

Fixed Fiddle http://jsfiddle.net/SNv6n/20/

You were calling self.alcoholDays instead of self.alcoholDays(). If you add the parentheses to those calls in your computed and add in the function 'capitalizeLastName' it works.

self.capitalizeLastName = function () {
     alert('TODO');   
}
self.enableBothDays = ko.computed(function () {

    if ((parseInt(self.alcoholDays()) > 0 && parseInt(self.alcoholDays()) <= 30) && (parseInt(self.drugDays()) > 0 && parseInt(self.drugDays()) <= 30)) {
        return true;
    } else {
        return false;
    }

}, self);

Upvotes: 1

NaveenKumar1410
NaveenKumar1410

Reputation: 1613

hi check this fiddle I fixed the problem .

1.) cleared binding error in your fiddle

2.) re-structured computed observable

   self.enableBothDays = ko.computed({
    read: function() {
        alert('In');
        var alcDays = Number(self.alcoholDays());
        var drgDays = Number(self.drugDays());
        alert(alcDays+','+drgDays);
        var temp = false;
  if (alcDays > 0 && alcDays <= 30 && drgDays > 0 && drgDays <= 30) {
        temp = true;
    } else {
        temp = false;
    }
        alert(temp);
        return temp;
}
});

3.) changed enable condition

fiddle..

mark it as answer

Upvotes: 1

Mozak
Mozak

Reputation: 2798

Use this enable : enableBothDays()== true Or enable : enableBothDays== true

Upvotes: 0

Related Questions