CODEWITHSUNDEEP
javascriptjquery
Gaurav
Gaurav

Reputation: 8487

Disabling jquery ui dialog buttons

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?

Upvotes: 0

Views: 1186

Answers (3)

desm
desm

Reputation: 311

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

Upvotes: 0

dotsa
dotsa

Reputation: 941

To enable: 

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

To disable:

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

Button Widget API

Upvotes: 0

Nhu Trinh
Nhu Trinh

Reputation: 13956

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....

Upvotes: 1

Related Questions