javascript - 动态启用/禁用kendo ui控制

Question

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

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

有人知道我是否可以在创建控件时执行此操作吗？

<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

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

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

这是绑定(bind)到 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");
    }
};

我更愿意通过 View 模型执行此操作，但目前它可以工作。

编辑:

我已经能够以正确的方式执行此操作(遵循 MVVM 模式)，因此现在我没有将 kendo 组合框包装在函数中，而是在 View 模型中添加了以下函数:

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

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