【问题标题】:Disable kendo numerictextbox widget on double click using the kendoui and jquery使用 kendoui 和 jquery 双击禁用 kendo numerictextbox 小部件
【发布时间】:2012-11-07 10:05:26
【问题描述】:

我有这个 html。双击我想禁用/启用下拉菜单:

<tr>
   <td><label id="labelId" >My Label</label></td>
   <td><input type="text" id="myInput" data-bind="kendoDropDownList: { data: source, value: myValue, enable: true }" /></td>
</tr>

我可以使用 kendo Api 的manipulate a property of a child element 解决方案来做到这一点:

$('tr').dblclick(function() {
  var $kd = $(this).find('input').data("kendoDropDownList");
  $kd.enable( $kd.element.is(':disabled') );
}); 

我有一个 kendoui 数字小部件。看来 kendoui 框架正在添加一些额外的 html 元素,最终的 html 看起来像这样:

<tr>
       <td><label id="labelId" >My Label</label></td>
       <td><input class="k-formatted-value k-input" style="display: inline-block;" type="text" readOnly="readonly"/>
           <input name="Afk" class="k-input" id="Afk" style="display: none;" type="text" data-bind="kendoNumericTextBox: { value: Afk, min:1, max:10000, step:1, format: 'd'}" data-role="numerictextbox" required=""/>
        <td>
    </tr>

我试过了:

$('tr').dblclick(function () {
        var $ntb = $(this).find('input').data("kendoNumericTextBox");

        $ntb.enable($ntb.element.is(':disabled'));
    });

但我认为这不起作用,因为有两个输入。我的问题是如何在双击时启用/禁用数字小部件,类似于禁用 kendodropdown 的方式?

【问题讨论】:

    标签: javascript jquery kendo-ui kendonumerictextbox


    【解决方案1】:

    您可以过滤data-role 属性,以便选择所需的input,如下所示:

    $('tr').dblclick(function () {
        var $ntb = $(this).find('input[data-role="numerictextbox"]').data("kendoNumericTextBox");
    
        $ntb.enable($ntb.element.is(':disabled'));
    });
    

    【讨论】:

    • 我做了类似的事情,但搜索了 name 属性......无论如何我更喜欢你的方式。
    【解决方案2】:
     var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
    
     numerictextbox.enable();
    
     numerictextbox.enable(false);
    

    http://demos.telerik.com/kendo-ui/numerictextbox/apienter link description here

    【讨论】:

    • 更简洁、更优雅的解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-19
    • 1970-01-01
    相关资源
    最近更新 更多