Как включить кнопку, когда поле ввода не пустое

Question

У меня есть требование, в котором есть форма, и если все поля заполнены, то будет нажата только кнопка отправки, иначе кнопка отправки будет отключена.

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 полей ввода, то как включить кнопку отправки, если и только если все поля заполнены.

Answer 1

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. Ключом к решению зависимостей между объектами viewmodel является Knockout's computed observables.

Answer 2

Вы можете использовать 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); 
} 

Это должно сделать вашу жизнь намного проще. Дайте мне знать, если нет.