使用knockoutjs禁用綁定

我試圖讓複選框被選中時禁用輸入框。我試圖使用Knockoutjs來完成這件事，但它似乎並不奏效。使用knockoutjs禁用綁定

這裏是我的html：

<input id="input1" type="text" placeholder="Something Here" 
data-bind="disable: makeInvalid"/> 
<input type="checkbox" id="chk1" data-bind="checked: makeInvalid"/> 
<label>Make Textarea Invalid</label>

這裏是我的JS：

var viewModel = { 
     makeInvalid : ko.observable(false),   
}; 

ko.applyBindings(viewModel, document.getElementById("chk1"));

我的小提琴是在這裏：

https://jsfiddle.net/devEngine/3ag0881z/2/

我試圖遵循淘汰賽的說明他們說的禁用綁定與enabl完全一樣E結合，正好相反：

http://knockoutjs.com/documentation/enable-binding.html

誰能告訴我什麼，我做錯了什麼？

任何幫助將不勝感激。

來源

2017-08-02 devEngine

此外，jQuery和淘汰賽文件添加到您的小提琴，這是正常的你的小提琴不會沒有他們:-) – Shadowfox

@Shadowfox工作，而淘汰賽可以組合使用與jQuery ，Knockout沒有依賴於jQuery（也沒有任何其他的JavaScript庫）。 – DavidRR

這是一個超級簡單的修復。你的應用綁定只是擊中了id爲chk1的元素。可觀察值的價值將僅限於該範圍內。只需刪除你的ko.applyBindings的第二個參數，它會工作得很好。

var viewModel = { 
 
     makeInvalid : ko.observable(false),   
 
}; 
 
    
 
    ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<input id="input1" type="text" placeholder="Something Here" 
 
data-bind="disable: makeInvalid"/> 
 
<input type="checkbox" id="chk1" data-bind="checked: makeInvalid"/> 
 
<label>Make Textarea Invalid</label>

來源

2017-08-02 12:51:35

非常感謝您的回覆 - 非常感謝！我明白這是如何工作的;然而，如果我需要明確指定一個元素以避免稍後發生多重綁定錯誤。你會看到，我的形式中有很多這樣的元素。 – devEngine

對不起，我想我知道了 - 只是包裝在一個專用的div中。再次感謝！ – devEngine

您可以將其封裝在div中，或者使用'with'綁定來指定一個對象作爲視圖模型。（我更喜歡'with'，這樣你可以在需要時與其他視圖進行交互。） –

你是從你的jsfiddle丟失淘汰賽。

這是不正確的 ko.applyBindings(viewModel, document.getElementById("chk1"));。您需要對輸入和複選框應用綁定。 ko.applyBindings(viewModel);

見工作的jsfiddle： https://jsfiddle.net/3ag0881z/4/

來源

2017-08-02 12:54:52

非常感謝 - 非常感謝！ – devEngine

使用knockoutjs禁用綁定

回答

相關問題