Trigger a function when an element gets enabled/disabled

问题

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.

回答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>

Additional info

The MutationObserver object is a newly introduced feature, and it isn't supported by old versions of some browsers: you can check the compatibility with any browser on this page.

回答2:

I know that this isn't the best way, but here I go:

var timeToCheck = 1000, past = 0;

function wait_enable (element) {
    var timer = setInterval(function(){
        if(element.is(":enabled")){
            element.focus();
            clearInterval(timer);
        }
        /* //here you can set a limit
        past += timeToCheck;
        if (past > limit) {
            clearInterval(timer);
        }
        */
    }, timeToCheck);
}

var textInput = $("input");
wait_enable(textInput);

$("button").on("click", function(){
    textInput.prop("disabled", false);
});

回答3:

I once had a project with it, but I lost the motivation to do it. I searched for a way to do that kind of stuff, and I found that MutationObserver should be a good way to do it.

Take a look : MutationObserver

And maybe there too : Mutation Events

I hope I understood your question correctly.

来源：https://stackoverflow.com/questions/29631251/trigger-a-function-when-an-element-gets-enabled-disabled

标签

javascript