Question

I have a disabled element which I enable it only after value was entered to it’s previous input, the problem is that change triggers before the input lost focus and the focus moved to the next not disabled element, so removing the disabled attribute then is no good.

HTML:

Fill this before you continue:      <input id="a" />
Fill this after the previous input: <input id="b" disabled="disabled" />​

jQuery:

$('#a').change(function(){
    if (this.value === "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');
});​

Fiddle

I manged to overcome this problem by changing from disabled to readonly but then it’s readonly and not disabled as I preferred, are there good and robust(mouse proof) ways to achieve it and using readonly?

Things to consider:

• Subscribing to multiple events doesn’t really seems right.
• The user can paste text to the 1st input without using keyboard at all.

Answer 1

You have said in your question that you don’t want to subscribe to multiple events, but this is the only way I can think of to do this. The problem is that different ways of changing the value of the input all interface directly with the C/C++ DOM, but they do not do it through the JS API. See this question for more on this.

A reasonably bulletproof way of doing it while subscribing to multiple events would be:

$('#a').on('keyup paste propertychange input', function() {
    if (this.value === "") $('#b').prop('disabled', true);
    else $('#b').removeAttr('disabled');
});

Here is a demonstration: http://jsfiddle.net/HmzYR/