Question

我们可以禁用“next”和“previous”按钮，直到用户选择树视图的任何元素。

换句话说，用户应从树视图中选择一个元素那么它应该选择下一个和上一个按钮，但在此之前它们被禁用了？

我在我的例子中使用树视图。

这里是fiddle

$('#next').click(function () {
    if($('.jstree-clicked').closest('li').next().length)
        $('.jstree-clicked').removeClass('jstree-clicked').closest('li').next().find('a:eq(0)').addClass('jstree-clicked')

});
 $('#pre').click(function () {
     if($('.jstree-clicked').closest('li').prev().length)
        $('.jstree-clicked').removeClass('jstree-clicked').closest('li').prev().find('a:eq(0)').addClass('jstree-clicked')

});

Answer 1

您可以使用 .prop() 来禁用页面加载上的按钮：

$('#next,#pre').prop('disabled',true);

并在选择元素时重新启用它：

$('#tree').on("select_node.jstree", function (e, data) { 
    $('#next,#pre').prop('disabled',false);

<强> Updated Fiddle

Answer 2

在dom ready事件中插入以下语句。

$('#next,#pre').attr('disabled',true);

或

$('#next,#pre').prop('disabled',true);

绑定以下事件，以便一旦用户选择了任何一个元素，就会启用它

$('#tree').on("select_node.jstree", function (e, data) { 
    $('#next,#pre').prop('disabled',false);
   // your code here
}

Answer 3

尝试以下代码

首先为html

中的两个按钮添加disabled="true"

<button id="next" disabled="true">next</button>
<button id="pre" disabled="true">pre</button>

然后在树的select事件中从按钮中删除disabled属性

$('#tree').on("select_node.jstree", function (e, data) { 
    alert("node_children: " + data.node.children);
    $('#tree').jstree(true).toggle_node(data.node); 
$('#next, #pre').removeAttr("disabled");                                                       

 });

这是JSFiddle

Answer 4

updated jsfiddle

最简单的解决方案可能只是在页面加载时禁用按钮。然后，只要用户单击树中的元素，就重新启用它们：

$(document).ready(function() {
    // ADDED
    $('button').attr("disabled","disabled");

$('#tree').on("select_node.jstree", function (e, data) { 
    alert("node_children: " + data.node.children);
    $('#tree').jstree(true).toggle_node(data.node);
    // ADDED
    $('button').removeAttr("disabled");  
});

如何在选择任何元素之前禁用按钮？

4 个答案: