Question

我正在使用knockout.js进行数据绑定。实际上有一个表单，某些字段接受名称，数字，电子邮件等。如果任何一个字段未填充并且按下保存按钮，那么该按钮转到残疾人状态。现在工作正常。

现在，如果我填空字段，那么我想再次启用该按钮，我不知道该怎么办。可以帮我怎么办？

以下是js代码

self.newPatient = ko.asyncCommand({

    execute: function (complete) {
        var isValid = $('#addPatientForm').parsley('validate');
        if (isValid) {
            var patientJson = ko.toJSON(self.patient());
            formdata.append("json", patientJson);
            //self.enableButton(false); 
            var imagepath = $.ajax({
                url: projectUrl + "newPatient",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    formdata = new FormData();
                    imagepath = res;
                    var length = self.patients().length;
                    var patient = self.patient();
                    //  self.enableButton(true); 
                }
            });
            $('.alert-patient-success').show();
            self.patients.removeAll();
            self.getPatients();
            /* $.when(self.patients.push(self.patient()),self.patient(new Patient()),self.dirtyFlag1().reset(),$('#patientTabs a:last').tab('show')) 
.always(complete);*/
        }
    },
    canExecute: function (isExecuting) {
        return !isExecuting && isDirty() && isValid();
    }
});

这是html代码

<script id="patientMetadataTemplate" type="text/html"> 
<form id="addPatientForm" data-validate="parsley"> 
<div class="control-group"> 
<label class="control-label" for="inputIcon">Name :</label> 
<div class="controls"> 
<div class="input-prepend" > 
<span class="add-on"><i class="icon-hand-right"></i></span> 
<input class="span8" type="text" data-bind="value: name" data-required="true" data-trigger="change" name="name"> 
</div> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label" for="inputIcon">Address :</label> 
<div class="controls"> 
<div class="input-prepend"> 
<span class="add-on"><i class="icon-hand-right"></i></span> 
<input class="span8" name="address" type="text" data-bind="value: address" data-required="true" data-trigger="change"> 
</div> 
</div> 
</div>

上面的js和html也有fiddle。

Answer 1

类似的东西：

var formCompleted = false;
$('input[type="submit"]').attr('disabled','disabled');

$(":text, :file, :checkbox, select, textarea").change(function() {
  formCompleted = validateForm();   
  if(formCompleted){
    $('input[type="submit"]').removeAttr('disabled');
  }
});

function validateForm() {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
      isValid = false;
    });
  return isValid;
}

首先禁用该按钮，在每个表单元素上更改，检查是否已填写，然后删除禁用的attr。我没有测试过这个，但它应该让你开始朝着正确的方向前进。

填写所有字段时启用按钮

1 个答案: