进度条不适用于 Kendo 数字文本框答案

【问题标题】：Progress bar not working with Kendo Numeric Text Box进度条不适用于 Kendo 数字文本框
【发布时间】：2015-12-05 00:12:49
【问题描述】：

我试图在我的应用程序中实现一个进度条。当我使用数字文本框时，进度条没有前进。如何使用数字文本框使其进展。谢谢。

<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-ui

【解决方案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) + "%");

    });

设置断点并查看空数字文本框的外观会很容易。

【讨论】：