Method for disabling a button in dat.gui?

Question

I am trying to figure out a way to easily disable/enable buttons within dat.gui.

I have dat.gui set up to control an animation. When the animation reaches its end, I want the "Play" button to become disabled. I have tried adding a "disabled" attribute to the DOM elements of the button, but I am still seeing the corresponding function fire when the button is clicked after this attribute is set.

My current method is the following:

1. Locate the li element that corresponds to the button in the dat.gui interface
2. Create a new DOM element that is semi-transparent and black, and add this inside the li element to gray out the contents of the button.
3. In the function bound to this button, check for the existence of this "disabled" DOM element within the button, and if it exists, refrain from executing the rest of the function.

This is a hack, and I would love to know if there was some method for disabling a button built right into dat.gui, or some better method that I am not aware of.

Answer 1

Here the most straightforward way I could think of to disable a single element of dat GUI:

let gui = new dat.GUI();  
let uiElement = gui.add(myObject, 'myPropertyName');
 
uiElement.__li.style = "opacity: 0.5; filter: grayscale(100%) blur(1px); pointer-events: none;"; 

Old browsers may not support pointer-events: none; so optionally you can add:

disableAll(uiElement.__li);

function disableAll(element){    
    for( var i = 0; i < element.childNodes.length; ++i){
        let elt = element.childNodes[i];
        disableAll(elt);
        elt.disabled = true;
    }
}

This may look "hacky" but in the official dat GUI API there is no such function and even if it was in there, it would most likely do something very similar.

Lastly, through the API you can entirely delete an element:

uiElement.remove();