how to disable the jquery dialog buttons

Question

My Needs: I am using a jquery modal dialog. I have some buttons on it. I want to disable one button when It dialog opens but want to enable it after some specific operation.

What i did: I can disable the button by adding this statementjQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

Problem: But now what I want is that when edit button is clicked I perform some action, after performing that action the `Issue' button become enable.

My code is below.

 jQuery(newdiv).dialog({
    width:500,
    height:275,
    dialogClass:'alert',
    modal: true,
    close: function(event, ui) { jQuery(newdiv).html(''); },
    buttons: {
        "issue":function()
        {

        },
        "Edit":function()
        {
          //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement
          jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
        },
        "Cancel":function(){jQuery(this).dialog('close');},
    }
});
jQuery(".ui-dialog-titlebar").hide();
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'});
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

Answer 1

There's no need to mess around with the classes on the buttons and it probably isn't a good idea anyway. The buttons in a jQuery-UI dialog are jQuery-UI buttons and they support disable and enable methods in the usual jQuery-UI style:

$button.button('enable');  // Enable the button
$button.button('disable'); // Disable the button

First of all, replace this:

jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

With this:

jQuery('.ui-dialog button:nth-child(1)').button('disable');

Then, in your edit handler, do this:

jQuery('.ui-dialog button:nth-child(1)').button('enable');

To enable the button.

As far as the selectors go, the main dialog <div> has a ui-dialog class so we start off with .ui-dialog. Then, we want the buttons inside the dialog so we're looking for <button> elements; this gives us .ui-dialog button. The buttons in the dialog are listed from left to right in the same order as in the buttons option to the dialog. There are various ways to get the first button:

• :first-child
• :first
• :nth-child

I went with :nth-child which is a CSS3 selector:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

So button:nth-child(1) is the first button. I figured that if you were doing things to one button, you'd probably end up doing things to other buttons so, for example, you could do .ui-dialog button:nth-child(2) to get the "Edit" button and that would line up nicely with the selector used for the "Issue" button.