动态启用/禁用 kendo ui 控件答案

【问题标题】：Enable/disable kendo ui control dynamically动态启用/禁用 kendo ui 控件
【发布时间】：2019-08-23 23:33:35
【问题描述】：

我想根据用户从复选框中的选择启用/禁用剑道组合框，我将其存储在一个变量中。

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

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

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

【问题讨论】：

将您的组合框定义包装在一个函数中。调用该函数仅由复选框更改事件触发。
既然您已经在使用绑定，我建议您看看MVVM demo，它完全符合您的要求；它将组合的启用状态和复选框的选中状态绑定到 kendo 可观察对象上的单个布尔属性。然后两者一起跟踪，也可以像这样以编程方式更改viewModel.set("isEnabled", true);
@FrozenButcher：这是我认为的解决方法，也是我最终要做的。谢谢。
@JoeGlover：我尝试过这样做，但是由于我们以更复杂的方式处理 MVVM（多个模型链接到视图模型），因此为此做的工作太多了。无论如何，感谢您的建议，我正在考虑新的实现。

标签： javascript kendo-ui telerik kendo-combobox

【解决方案1】：

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

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

剑道组合框仍然被包裹并有一个 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>

就是这样，这是一种更清洁/正确的处理方式。

【讨论】：