如何在輸入字段不爲空時啓用按鈕

我有一個需求，其中有一個表單，如果所有字段都填充，那麼只有提交按鈕將被啓用，否則提交按鈕將處於禁用狀態。如何在輸入字段不爲空時啓用按鈕

This fiddle正常工作1個輸入字段：

<button data-bind="enable: my">My Button</button> 
<input type="text" name="hi" data-bind="value:my" />

ko.applyBindings({ my: ko.observable() });

不過，我不知道如何做到這一點的多輸入字段等作爲this fiddle。如果有大約10個輸入字段，那麼當且僅當所有字段填滿時如何啓用提交按鈕。

來源

2014-04-16 SpringLearner

驗證：https://github.com/Knockout-Contrib/Knockout-Validation – Anders

@Anders感謝您的有用的鏈接，但我已經使用parsley.js的表單驗證 – SpringLearner

@KyleMit感謝您使我的職務更好看 – SpringLearner

HTML

<button data-bind="enable: isFormValid">My Button</button> 
<input type="text" data-bind="value: text1, valueUpdate: 'keyup'" /> 
<input type="text" data-bind="value: text2, valueUpdate: 'keyup'" /> 
<input type="text" data-bind="value: text3, valueUpdate: 'keyup'" /> 
<input type="text" data-bind="value: text4, valueUpdate: 'keyup'" />

JS：

var vm = { 
    text1: ko.observable(""), 
    text2: ko.observable(""), 
    text3: ko.observable(""), 
    text4: ko.observable("") 
} 

vm.isFormValid = ko.computed(function() { 
    return this.text1() && this.text2() && this.text3() && this.text4(); 
}, vm); 

ko.applyBindings(vm);

見更新JSFiddle。解決視圖模型間屬性依賴關係的關鍵是Knockout's computed observables。

來源

2014-04-16 12:27:07

你的小提琴和我的小提琴在問題中的作品相同http://jsfiddle.net/M6BzW/577/ 。當你填寫一個文本字段，那麼該值反映在所有字段 – SpringLearner

不再。花了一段時間來更新JSFiddle。 –

對不起，我正在看你的答案和理解代碼。所以遲到了你的回答。再次運送。+ 1爲最佳答案 – SpringLearner

你可以使用jQuery來解決這個問題，通過執行以下操作：

HTML標記：

<button id="my" type="button" disabled="true">My Button</button> 
<input id="hi" type="text" name="hi" />

jQuery腳本：

if (allFields == valid) { 
    $('#my').prop('disabled', false); 
}

這應該讓您的生活一個更容易。如果不是，請告訴我。

來源

2014-04-16 12:13:52

問題是關於Knockout.js –

他有jquery作爲其中一個標籤，所以我基於我的答案那。 –

@StanCromlish感謝您的回答，但我寧願首先knockout.js和parsley.js，我不是downvoter – SpringLearner

如何在輸入字段不爲空時啓用按鈕

回答

相關問題