I have a disabled button that should become enabled when there is text in an input element. The code to enable/disable the button is in the onblur event of the input. My HTML consists of an input with id="in", a button with attribute disabled="disabled" and a span with id="sp".
$(document).ready(function(){
var count = 0;
$("#in").bind("blur",function(){
alert("blur");
if($("#in").attr("value").length > 0){
$("button")[0].disabled = false;
} else {
$("button")[0].disabled = true;
}
});
$("#in").bind("focusout",function(){
alert("focusout");
if($("#in").attr("value").length > 0){
$("button")[0].disabled = false;
} else {
$("button")[0].disabled = true;
}
});
$("button").click(function(){
count++;
$("#sp").text(count);
});
});
In IE 9, if I type text into the input element and click on the disabled button, the input's onblur fires, the button becomes enabled, and I get the button's click event.
However, in Chrome, when I type text into the input element and click on the disabled button, nothing at all happens.
Is there some property of the button I'm overlooking? I tried to get the focusout to fire, but I get the same result. I also get the same result using Firefox. Chrome seems to treat the disabled attribute more strictly than IE, but this is going to cause problems with our users. How can I get the onblur (or some equivalent) event to fire when I click off the input element onto a disabled button?