javascript - Trigger a function when an element gets enabled/disabled

Question

This seems like a relatively simple thing but I can't find anything anywhere on how to do it. I have a modal that opens with a disabled input while waiting for async data. I want to know when that input becomes enabled to I can focus the input. This is what I'm trying to accomplish. Think of it as a global modal open handler:

$('.modal').on('shown.bs.modal', function (event) {
    var textInput = $(event.target).find('input[type=text]:visible').first();
    if (textInput.is(':disabled'))
    {
        textInput.on('<<<<<enabled>>>>>', function(){
            textInput.off('<<<<<enabled>>>>>');
            textInput.focus();
        });
    }
    else
    {
        textInput.focus();
    }
});

Is there not an event that gets triggered when an input becomes enabled/disabled?

<input type="text" class="form-control txtUserSearch" data-bind="value: userFilter, event: { keyup: FilterUsers }, enable: AvailableUsers().length > 0">

Which becomes enabled if there are users returned in an async request.

Answer 1

Unfortunately, there's no such thing as onenabled or ondisabled listeners. Input fields can only be enabled/disabled by JavaScript once the page has loaded (or by some user which is messing up with your HTML in his developer tools' inspector). For this reason, if you want to detect those changes you'll have to use a MutationObserver, and listen for attribute mutations of the element you want, to check whenever the disabled property gets added to your input field.

Here's an example of what I'm talking about:

var btn = document.getElementById('toggle'),
    input = document.getElementById('inp');

// This is just to demonstrate the behavior of the MutationObserver
btn.addEventListener('click', function() {
    if (input.disabled) input.disabled = false;
    else input.disabled = true;
});
                     

var observer = new MutationObserver(function(mutations) {
    for (var i=0, mutation; mutation = mutations[i]; i++) {
        if (mutation.attributeName == 'disabled') {
            if (mutation.target.disabled) {
                // The element has been disabled, do something
                alert('You have disabled the input!');
            } else {
                // The element has been enabled, do something else
                alert('You have enabled the input!');
            }
        }
    };
});

// Observe attributes change
observer.observe(input, {attributes: true});

<p>Try clicking the button to disable/enable the input!</p>
<input id="inp" type="text" placeholder="Write something...">
<button id="toggle">Toggle</button>