how to disable button before before any element is selected?

Question

Can we disable buttons "next" and "previous" until user select any element of tree view.

In other words, user should select one of the element from tree view then it should select next and previous button but before that they are disabled?

I am using tree view in my example.

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

You can use .prop() to disable the buttons on page load:

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

and re-enable it when your element is selected:

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

Updated Fiddle

Answer 2

Insert the following statement inside the dom ready event.

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

or

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

Bind the following event so that once the user has selected any one of the element, it will be enabled

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

Answer 3

Try below code

First put disabled="true" for both button in html

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

then on select event of tree remove disabled attribute from buttons

$('#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");                                                       

 }); 

here is the JSFiddle

Answer 4

updated jsfiddle

The simplest solution is probably just to disable the buttons when the page loads. Then just re-enable them once a user clicks an element in the tree:

$(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");  
});