Disabling jquery ui dialog buttons

Question

How can i disable the jquery UI dialog buttons like :

   $("#dialog").dialog({ width: 500, modal: true, show: 'drop', hide: 'drop',
        buttons: {
            "Next": function () {/* do something */ },
            "Finish" : function {/* do something */ } 
        }
    });

I want to keep disabled the Next button until user selects some radio button or checkbox and when user will select any of then 'Next button will enabled'. (Same behavior which we can see when we install any new software.).How can i do this?

I assume they have a set id or class, just set some event listeners with .on or .live (depending on jQuery version) calling for a validation/check function, it can't be that hard. — Fabrício Matté
– Fabrício Matté, Commented Jun 1, 2012 at 7:30

Nhu Trinh · Accepted Answer · 2012-06-01 07:30:30Z

1

You can use firebug or inspect element from google chrome then find next button id or css rule... I mean a correct selector to the button then you can always call

$("Nextbutton selector").attr('disabled','disabled');

re enable by

$("Nextbutton selector").removeAttr('disabled');

hope this help

PS: When inspect i saw

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Next</span>
</button>

so you can call

$('button.ui-button:contains("Next")').attr....

answered Jun 1, 2012 at 7:30

Nhu Trinh

14k6 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gaurav Over a year ago

but how we can give the id to dialogs Next button`

Nhu Trinh Over a year ago

Jquery usually do that itself, you cant change that

Nhu Trinh Over a year ago

I just suggest a selector, can you try?

dotsa · Accepted Answer · 2013-06-18 22:17:56Z

0

To enable:

$(e.currentTarget).button( "option", "disabled", false );

To disable:

$(e.currentTarget).button( "option", "disabled", true );

Button Widget API

answered Jun 18, 2013 at 22:17

dotsa

9511 gold badge12 silver badges16 bronze badges

Comments

desm · Accepted Answer · 2013-07-30 00:19:18Z

0

Right after creating and opening the dialog, which is what this (your code) does:

 $("#dialog").dialog({ width: 500, modal: true, show: 'drop', hide: 'drop',
    buttons: {
        "Next": function () {/* do something */ },
        "Finish" : function {/* do something */ } 
    }
 });

Do this:

 $("#dialog").dialog('widget')
     .find("button :contains('Next')").parent().button("disable");

It will immediately disable the "Next" button. When ready, you can enable the button by doing:

 $("#dialog").dialog('widget')
     .find("button :contains('Next')").parent().button("enable");

answered Jul 30, 2013 at 0:19

desm

3112 silver badges6 bronze badges

Collectives™ on Stack Overflow

Disabling jquery ui dialog buttons

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related