How can I disable a button in a jQuery dialog from a function?

jquery jquery-ui
Draco picture Draco · Feb 23, 2009 · Viewed 451.3k times · Source

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

Tom Ritter picture Tom Ritter · Feb 23, 2009

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.

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More
check / uncheck checkbox using jquery?

I have some input text fields in my page and am displaying their values using JavaScript. I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value. Here I want to …

Read More