knockout.js - 他の入力に基づいて入力を無効にする Knockoutjs

Question

他の 2 つの入力が両方とも 1 から 30 の間にない場合、入力を無効にするノックアウト オブザーバブルをセットアップしようとしています。現在、jsFiddle でコードを実行すると、入力が無効になります。残念ながら、入力を再度有効にすることはできません。これがjsFiddleのコードです 。助けてくれてありがとう。

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());

ウェイド

Answer 1

固定フィドル http://jsfiddle.net/SNv6n/20/

self.alcoholDays() の代わりに self.alcoholDays を呼び出していました。計算されたこれらの呼び出しに括弧を追加し、関数 'capitalizeLastName' を追加すると、機能します。

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);

Answer 2

こんにちは、このフィドル をチェックしてください。問題を修正しました。

1.）あなたのフィドルのバインドエラーをクリアしました

2.) 再構成された計算オブザーバブル

   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.) 有効条件の変更

フィドル..

回答としてマークする

Answer 3

この enable を使用します: enableBothDays()== true または enable : enableBothDays== true