Enable/disable kendo ui 动态控制

Question

我想enable/disable一个kendo基于用户从复选框中选择的组合框，我将其存储在一个变量中。

我已经尝试将变量设置为启用属性，但这仅在内置控件时有用。

有人知道我在创建控件时是否可以这样做吗？

<div id="fund" class="col-xs-3">
 input class="required" data-bind="title: $parent.selectedFund, 
  kendoComboBox: {
   placeholder: 'Start typing to search...',
   value: $parent.test,
   widget: $parent.searchSource,
   dataTextField: 'managerName',
   dataValueField: 'managerId',
   filter: 'contains',
   autoBind: false,
   minLength: 3,
   enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value
   change: function(){ if(this.value() && this.selectedIndex == -1) 
   {
    setTimeout(function () {$parent.selectedManagerId(null);}, 100);}},
    dataSource: {
    serverFiltering: true,
    transport: {
    read: $parent.retrieveManager
   }
  }
 }" />
</div>

Answer 1

我最终将 kendo 组合框定义包装在一个函数中，所以它现在看起来像这样：

<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />

kendo 组合框仍然被包装并且有一个 id，我稍后在 javascript 中使用它来操作它：

<div class="col-xs-3" id="funds">
    <input class="required" data-bind="title: $parent.selectedFund, 
        kendoComboBox: {
            placeholder: 'Start typing to search...',
            value: $parent.selectedManagerId,
        ...
    }" />
</div>

这是绑定到 onclick 复选框事件的 JavaScript 函数：

function SetFundsCombobox() {
    var fundsDiv = document.getElementById('funds');
    var inputSelector = fundsDiv.getElementsByClassName('k-input');
    var span = fundsDiv.getElementsByTagName('span');

    if (document.getElementById('overrideGlobalMappingCheck').checked) {
        document.getElementById('funds').disabled = false;
        inputSelector[0].disabled = false;
        span[1].classList.remove("k-state-disabled");
    } else {
        document.getElementById('funds').disabled = true;
        inputSelector[0].disabled = true;
        span[1].classList.add("k-state-disabled");
    }
};

我宁愿通过视图模型来执行此操作，但它现在有效。

编辑：

我已经能够以正确的方式做到这一点（遵循 MVVM 模式），所以现在我没有将 kendo 组合框包装在一个函数中，而是在视图模型中添加了以下函数：

$scope.overrideGlobalMappingChecker = ko.computed(function () {
    if ($scope.entityMapping()) {
        var checkboxChecked = $scope.entityMapping().overrideGlobalMapping();
        $("#funds .k-input").prop('disabled', !checkboxChecked);
        if (!checkboxChecked) {
            $scope.selectedFundId(null);
        }
    }
});

所以现在，html 只需要在包含组合框的 div 中定义 id：

<div class="col-xs-3" id="funds">
    <input data-bind="title: $parent.selectedFundName, kendoComboBox: {
    autoBind: false,
    ...
    }" />
</div>

就是这样，这是处理这个问题的 cleaner/correct 方法。

Enable/disable kendo ui 动态控制

Enable/disable kendo ui control dynamically

javascript

telerik

kendo-ui

kendo-combobox