Kendo change事件表单校验通过后按钮无法启用问题求助

按钮无法正常启用基本是以下几个Kendo使用的典型坑点导致，按顺序排查即可：

• 错误使用jQuery val()读取Kendo组件值
  Kendo所有表单类组件（下拉框、文本输入框、日期选择器等）初始化后，原生input的value属性不会和用户UI操作实时同步，直接用$("#xxx").val()拿到的很多时候是组件初始化时的默认值，而非用户当前输入/选择的内容，尤其#selectOwner如果是Kendo下拉组件，未选值时和选值后直接val()经常返回空串，导致校验条件始终无法满足。
  正确取值方式是先获取Kendo组件实例，调用实例的value()方法取值：
  • 普通Kendo文本框：$("#id").data("kendoTextBox").value()
  • Kendo下拉框/组合框：$("#id").data("kendoDropDownList").value()（如果是ComboBox就替换成kendoComboBox）
• 直接修改DOM属性控制Kendo按钮状态无效
  如果#addToGrid是Kendo Button组件，它有内部独立的状态管理，用jQuery的prop()改DOM的disabled属性不会同步组件状态，会出现属性改了但按钮依然不可点击的情况，正确操作是调用按钮实例的enable()方法：
  • 启用：$("#addToGrid").data("kendoButton").enable(true)
  • 禁用：$("#addToGrid").data("kendoButton").enable(false)
• 校验事件未覆盖所有表单字段
  如果onChange函数只绑定到了部分字段的change事件上，用户操作未绑定的字段时不会触发校验，按钮状态自然不会更新，需要确保6个待校验字段的change事件都绑定了这个校验函数。
• 全空格输入误判+重复id问题
  取值后没有做trim处理的话，用户输入全空格会被误判为非空；如果页面存在重复id的DOM元素，jQuery选择器会匹配到错误元素，导致取值、按钮操作都失效。

修正后参考代码 #

function onChange(){
    // 注意根据你实际使用的Kendo组件类型，替换data()内的组件标识
    const fieldValues = [
        $("#firstNameProperty").data("kendoTextBox").value().trim(),
        $("#lastNameProperty").data("kendoTextBox").value().trim(),
        $("#emailField").data("kendoTextBox").value().trim(),
        $("#selectOwner").data("kendoDropDownList").value().trim(),
        $("#cprNumberProperty").data("kendoTextBox").value().trim(),
        $("#phoneField").data("kendoTextBox").value().trim()
    ];
    const isAllFilled = fieldValues.every(val => val.length > 0);
    const addBtn = $("#addToGrid").data("kendoButton");
    
    if(isAllFilled){
        console.log("enabled");
        addBtn.enable(true);
    } else {
        console.log("disabled");
        addBtn.enable(false);
    }
}

如果你的按钮是原生button不是Kendo组件，把上面操作按钮的部分换回prop("disabled", !isAllFilled)即可，核心是替换Kendo组件的取值方式。

内容的提问来源于stack exchange，提问作者Gururaj Nadig