解决Jstree 选中父节点时被禁用的子节点也会选中的问题

 更新时间:2017年12月27日 08:39:39   作者:DonaldTDZ  
下面小编就为大家分享一篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题描述:

最近用jstree遇到一个问题,父节点选中时,被禁用的子节点也会选中如下

解决方案:

1、 将jstree升级到最新的版本,v3.3.4及以上就可以

2、 修改checkbox插件配置,将cascade_to_disabled设置为false(注:需要将配置脚本放jstree.min.js的后面)

<script src="./../../dist/jstree.min.js"></script>
<script>
$.jstree.defaults.checkbox = {
      visible: true,
      three_state: true,
      whole_node: true,
      keep_selected_style: true,
      cascade: '',
      tie_selection: true,
      /**
      * This setting controls if cascading down affects disabled checkboxes
      * @name $.jstree.defaults.checkbox.cascade_to_disabled
      * @plugin checkbox
      */
      cascade_to_disabled : false,
      cascade_to_hidden : true
};
 
 
$('#data').jstree({
    'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1", "state": { "disabled": true } },
            { "text" : "Child node 2" },
            { "text" : "Child node 3" },
            { "text" : "Child node 4" },
            { "text" : "Child node 5" },
            { "text" : "Child node 6" }
        ]}
      ]
    }
    ,"plugins" : [ "checkbox" ]
  });
</script>

修改后当选中父节点时,子节点会跳过禁用子节点如下:

以上这篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何实现textarea里的不同文本显示不同颜色

    如何实现textarea里的不同文本显示不同颜色

    如何实现textarea里的不同文本显示不同颜色呢?控制textarea的style设置Textarea以及把文本放到标记里都不会起作用,下面有个不错的解决方法,感兴趣的朋友可以了解下
    2014-01-01
  • layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui左侧菜单栏鼠标悬停显示菜单文字功能实现

    layui封装的左侧菜单是固定宽度的,且左侧菜单栏在css里改变宽度,效果并不是很好(还设计头部菜单栏),如果写js来让菜单栏能够拉伸,也比较麻烦,那怎么最简单的,让用户看到菜单的文字呢,下面给大家分享layui左侧菜单栏鼠标悬停显示菜单文字功能实现,感兴趣的朋友一起看看吧
    2024-06-06
  • 理解javascript async的用法

    理解javascript async的用法

    本篇文章主要介绍了理解javascript async的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 仿iPhone通讯录制作小程序自定义选择组件的实现

    仿iPhone通讯录制作小程序自定义选择组件的实现

    这篇文章主要介绍了仿iPhone通讯录制作小程序自定义选择组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 使用console进行性能测试

    使用console进行性能测试

    各大浏览器内置的开发工具,都提供了一个console对象。它主要有两个作用:显示网页代码运行时的错误信息。提供了一个命令行接口,用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。
    2015-04-04
  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容,下面这篇文章主要给大家介绍了关于JavaScript中innerHTML使用方法的相关资料,需要的朋友可以参考下
    2022-10-10
  • js实现多选项切换导航菜单的方法

    js实现多选项切换导航菜单的方法

    这篇文章主要介绍了js实现多选项切换导航菜单的方法,可实现动态生成多选项切换导航菜单的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-02-02
  • 基于JS实现接粽子小游戏的示例代码

    基于JS实现接粽子小游戏的示例代码

    端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,快跟随小编一起来学习学习吧
    2022-05-05
  • JavaScript比较两个对象是否相等的方法

    JavaScript比较两个对象是否相等的方法

    这篇文章主要介绍了JavaScript比较两个对象是否相等的方法,通过对js对象进行各方面的比较来判断两个对象是否相等,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript中RegExp保留小数点后几位数的方法分享

    javascript中RegExp保留小数点后几位数的方法分享

    文章介绍一篇关于javascript中RegExp保留小数点后几位数方法,有需要了解的朋友可以参考一下
    2013-08-08

最新评论