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");

Duffy

just set the attribute to false on edit's click...did you do that? – Zelda

No you must remove the attribute disabled to enable something, the only precence of the attribute disables an input – Individualism

@Nicola Peluchetti see my edited question – Duffy

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.

Against

Strange dude. Its working. But I am unable to understand this. Would you like to a little more explan it how you have done this. how jQuery('.ui-dialog button:nth-child(1)' find that specific button? – Duffy

Dude this is awesome. Totally understood that. Outstanding. +1 for well explanation. – Duffy

This was the only solution of many that worked for me. Many Thanks! – Gabardine

Answer 2

You could do:

    "Edit":function()
    {
       //perform other actions
      jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
    },

Remember, an input element with the attribute disabled is always disabled, whatever value you set the attribute to: $('input').attr('disabled', false) is equal to $('input').attr('disabled', 'disabled')

Individualism

Thanks for your response. Actually I am opening a new dialog on edit button. When new dialogue close I want to enable the issue button of parent dialog. I have also edited my question. – Duffy

Is there only one button called issue?If so look at how i edited my answer – Individualism

Answer 3

"Edit":function()
        {
       jQuery(".ui-dialog-buttonpane button:contains('Issue')")
             .removeAttr("disabled")
             .removeClass("ui-state-disabled")
             .addClass('ui-state-default');

        }

Physics

Answer 4

if you have other dialog in the context, this way jQuery('.ui-dialog button:nth-child(1)').button('disable'); may cause some problem.

there is a few step to improve this : 1st: find the dialog handle

$mydialog = $("#divfordialog");

2nd: find the button panel

$buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane");

3rd: find the target button, assume the button's name is BTN

$buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")');

last: handle it(eg:disable it, enable it);

$buttonwanttocontrol.button("disable");
$buttonwanttocontrol.button("enable");

offently, we want to init our dialog button status when it open, this will work find:

$("divfordialog").dialog({
    ...
    buttons : {
        ...
        "BTN" : function () {},
        ...
    },
    open : function () {
        if (shouldDisableBtn()) {
            $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable")
        }
    }
    ...
});

Alley