Text field does not take focus after being enabled on click on a button

Question

I want to focus on a text field after it has been enabled after I have clicked on the button but with this code it won't work! If I click on the button once again when the text field is enabled this code works like a charm.

$('body').on('click', '#button', function() {
    if($('input[name="textfield-contact-name"]').val() == '') {
        $('input[name="textfield-contact-name"]').focus();
    }

    $('input').attr('disabled', false);
});

I have tested to use id="field" for the text field and then #field in jQuery but the same problem is still there! Demo: http://jsfiddle.net/edgren/Wj5Cq/

Why does it not focus the text area after enabling the text field?

Thanks in advance.

Answer 1

You can't focus a disabled element. Remove the disabled attribute first.

$('body').on('click', '#button', function() {

  $('input').removeAttr("disabled");

  if($('input[name=textfield-contact-name]').val() == '') {
    $('input[name=textfield-contact-name]').focus();
  }
});

​ Plus, I think the markup for disabled should be:

<input type="text" name="textfield-contact-name" disabled="disabled">

I also changed your jQuery selectors ( removed the " ) (that's the way it worked for me)