How to disable and grey out a form button if the textfield is empty?

Question

I have a custom module built, and I would like to grey out and disable the submit form button if the textfield is empty. Can anyone help?

Here is the code for the textfield and the form button:

$form['ro-user-details']['nickname'] = array(
    '#type' => 'textfield', '#width' => 50,
    '#title' => t('Nickname'),
    '#default_value' => $ro_user->nickname,
    '#size' => 50,
    '#maxlength' => 200,
    '#required' => TRUE,
    );

    $form['ro-user-details']['change_nickname'] = array('#type' => 'submit', '#value' => t('Change Nickname'));

Answer 1

Obviously you will want to do this with some jQuery...And of course there is more than one way to do this, but:

$(function(){
      //Set button disabled
      $("input[type='submit']").attr("disabled", "disabled");

      //Append a change event listener to your input
      $("input[name='nickname']").change(function(){

            if($(this).val().length > 0) {
              $("input[type='submit']").removeAttr("disabled");  
            }                            
      });

      // You could then trigger the a change event on load just to check
      $("input[name='nickname'").trigger('change');
});

That should be the gist of it. Of course you would want to change your "name" value to whatever your input name is.