進度條不能與Kendo數字文本框一起工作

Question

我試圖在我的應用程序中實現進度條。當我使用數字文本框時，進度條沒有前進。如何使用數字文本框使其進展。謝謝。

<form name="ContactInforForm" action="ContactInformation.html" onsubmit="return ValidateRequiredFields()" method="post"> 
    <div> 

    <table class="forms" style="padding-left:9em"> 
     <tr> 
     <td> 
      <h4>Profile Completeness: <span id="completed">20%</span></h4> 
     </td> 
     <td> 
      <div id="profileCompleteness"></div> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      Employee Name: 
     </td> 
     <td> 
      <input type="text" name="FName" id="txtFname" /> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      Employee Id: 
     </td> 
     <td> 
      <input type="text" name="EmpID" id="txtEmpID" /> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      Age: 
     </td> 
     <td> 
      <input type="text" name="Age" id="txtAge" /> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      Contact Phone: 
     </td> 
     <td> 
      <input type="text" name="PrimaryPhone" id="txtPriPhone" /> 
     </td> 
     <td><span id="PPhoneValidationMsg" style="color:red; font-size:smaller; font-weight:bold; "></span></td> 
     </tr> 

     <tr> 
     <td> 
      <button style="width:75px;" type="button" id="btnNext" onclick="ValidateRequiredFields();">Submit</button> 
     </td> 
     </tr> 
    </table> 

    </div> 
</form> 

<!--Make all the controls into kendo --> 
<script> 
    $(document).ready(function() { 

    $("#txtFname").kendoMaskedTextBox({ 

    }); 

    $('#txtEmpID').kendoNumericTextBox({ 

    }); 


    $('#txtAge').kendoNumericTextBox({ 

    }); 


    $('#txtDob').kendoDatePicker({ 

    }); 

    $('#txtDesig').kendoMaskedTextBox({}); 

    $('#txtAdd1').kendoMaskedTextBox({ 

    }); 
    $('#txtAdd2').kendoMaskedTextBox({ 

    }); 

    $('#drpStates').kendoDropDownList({ 

    }); 
    $('#drpCountry').kendoDropDownList({ 

    }); 

    $("#txtPriPhone").kendoMaskedTextBox({ 
     mask: "(000)000-0000" 
    }); 



    $("#btnNext").kendoButton(); 

    var pb = $("#profileCompleteness").kendoProgressBar({ 
     type: "chunk", 
     chunkCount: 10, 
     min: 0, 
     max: 10, 
     value: 2 
    }).data("kendoProgressBar"); 


    $(".forms input").change(function() { 
     var completeness = 2; 
     $(".forms input").each(function() { 
     if (this.value != "") { 
      completeness++; 
     } 
     }); 

     pb.value(completeness); 
     $("#completed").text((completeness * 10) + "%"); 


    }); 
    }); 
</script> 

當我將kendo數字文本框更改爲蒙版文本框時，代碼似乎正常工作。但對於我的要求，我需要數字文本框。

Answer 1

數字文本框的默認值可能不是「」。嘗試是這樣的：

$(".forms input").change(function() {     
     var completeness = 2;     
     $(".forms input").each(function() { 
      if (this.hasClass("k-numerictextbox") && this.value != "0" && this.value != "") { 
       completeness++; 
      } else if (this.value != "") { 
       completeness++; 
      } 
     }); 

     pb.value(completeness); 
     $("#completed").text((completeness * 10) + "%"); 

    }); 

將是很容易設置一個斷點，看空的數字文本框的樣子。