Topic on Talk:OOUI

For example, switching a button from enabled to disabled.

You'll want to call the setDisabled() method, see the docs.

For instance, in the code to insert it:

// Create button
const buttonWidget = new OO.ui.ButtonWidget( {
	icon: 'next',
	label: 'Press me!'
} );

// Append to DOM
$('body').append( buttonWidget );

// Make it disabled
buttonWidget.setDisabled( true );

On the other hand, if the button was injected by PHP, you'd need to infuse it first, using an ID you set on it (in this case, 'thisIsMyButton':

// Get the button's DOM node
const buttonNode = document.getElementById( 'thisIsMyButton' );

// Turn it into an OOUI widget
const buttonWidget = OO.ui.infuse( buttonNode );

// Make it disabled
buttonWidget.setDisabled( true );

Thanks a lot!

But in this case(js): the button has been inserted to DOM by function1, but when I want to disable it in function2 after some process, I can't find a way to reclaim the button object defined in function1. So, is there any way to achieve that? The infuse method seems to fit this requirement but does it just work with PHP injected element?

Looking forward to your reply!

You should ideally have function1 and function2 communicate properly rather than through the DOM, but yes, you can re-infuse to get a handle on a widget.

OK, thanks. I haven't learn coding systematically, so my dumb way is to re-infuse from DOM.