Question

I have a jQuery dialog that requires the user to enter certain information. In this form, I have a ‘continue’ button. I would like this ‘continue’ button to only be enabled once all the fields have content in them, else it will remain disabled.

I wrote a function that is called everytime a field status has changed. However, I don’t know how to enable and disable the dialog button from this function. What should I do?

Oops and I forgot to mention that these buttons were created as follows:

$(function() {   $('#dialog').dialog({     bgiframe: true,     height: 'auto',     width: 700,     show: 'clip',     hide: 'clip',     modal: true,     buttons: {       'Add to request list': function() {         $(this).dialog('close');         $('form').submit();       },       'Cancel': function() {         $(this).dialog('close');       }     }   }) }); 

Answer 1

You would want to set the disabled property

 $('#continueButton').attr('disabled', true); 

Update: Ahha, I see the complexity now. The jQuery Dialog had a single line that will be of use (under the ‘buttons’ section.

 var buttons = $('.selector').dialog('option', 'buttons'); 

You’ll need to get the buttons collection from the dialog, loop through that to find which one you need, and then set the disabled attribute as I showed above.