Javascript 动态启用/禁用剑道ui控件

Javascript 动态启用/禁用剑道ui控件,javascript,kendo-ui,telerik,kendo-combobox,Javascript,Kendo Ui,Telerik,Kendo Combobox,我想根据用户从复选框中的选择启用/禁用剑道组合框,我将其存储在变量中 我已经尝试将变量设置为enable属性,但这仅在内置控件时有用 有人知道我在创建控件时是否可以这样做吗 <div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search.

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

我已经尝试将变量设置为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>

input class=“required”data bind=“title:$parent.selectedFund,
kendoComboBox:{
占位符:“开始键入以搜索…”,
值:$parent.test,
小部件:$parent.searchSource,
dataTextField:“managerName”,
dataValueField:“managerId”,
筛选器:“包含”,
自动绑定:错误,
最小长度:3,
enable:overrideGlobalMapping,//这对我来说不起作用,即使变量包含正确的值
更改:函数(){if(this.value()&&this.selectedIndex==-1)
{
setTimeout(函数(){$parent.selectedManagerId(null);},100);},
数据源:{
是的,
运输:{
读:$parent.retrieveManager
}
}
}" />

我最终将剑道组合定义包装在一个函数中,因此它现在看起来如下所示:

<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />
我更愿意通过视图模型执行此操作,但它现在可以工作

编辑:

我已经能够以正确的方式(遵循MVVM模式)完成此操作,因此现在,我没有将剑道组合框包装在函数中,而是在视图模型中添加了以下函数:

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


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

我最终将剑道组合定义包装在一个函数中,因此它现在看起来像这样:

<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />
我更愿意通过视图模型执行此操作,但它现在可以工作

编辑:

我已经能够以正确的方式(遵循MVVM模式)完成此操作,因此现在,我没有将剑道组合框包装在函数中,而是在视图模型中添加了以下函数:

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


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

将组合框定义包装到函数中。仅通过复选框更改事件调用函数触发器。由于您已经在使用绑定,我建议您查看一下,它完全满足您的需要;它将组合的启用状态和复选框的选中状态绑定到剑道可观察对象上的单个布尔属性。然后,这两者一起跟踪,也可以通过编程方式进行更改,如下所示
viewModel.set(“isEnabled”,true)@FrozenButcher:这是我认为的一种变通方法,也是我最终实际做的事情。谢谢。@JoeGlover:我试过这么做,但是因为我们用一种更复杂的方式处理MVVM(不止一个模型链接到视图模型),仅此就太多了。无论如何,谢谢你的建议,我在新的实现中考虑到了这一点。将你的组合框定义包装在一个函数中。仅通过复选框更改事件调用函数触发器。由于您已经在使用绑定,我建议您查看一下,它完全满足您的需要;它将组合的启用状态和复选框的选中状态绑定到剑道可观察对象上的单个布尔属性。然后,这两者一起跟踪,也可以通过编程方式进行更改,如下所示
viewModel.set(“isEnabled”,true)@FrozenButcher:这是我认为的一种变通方法,也是我最终实际做的事情。谢谢。@JoeGlover:我试过这么做,但是因为我们用一种更复杂的方式处理MVVM(不止一个模型链接到视图模型),仅此就太多了。无论如何,谢谢你的建议,我在新的实现中考虑到了这一点。