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

Question

Hi,

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. Any ideas?

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 1

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.

Answer 2

Im trying to tackle a similar problem, but in my case. I want one of the buttons to be disabled until the user checks a checkbox.
Ive been fiddling in Firebug, attempting to get something working but with no result. For example:

>>> var button = $('button')[1]
>>> button
<button class="ui-state-default ui-corner-all" type="button">
>>> button.attr("disabled", true)
TypeError: button.attr is not a function

Any suggestions?

Answer 3

I found a work around that may apply to people trying to do something similar. Instead of disabling the button i put a simple if statement in the function to check if the checkbox was checked. If it wasnt if displayed a simple message saying the box had to be checked before submission.

For example:

  $("#confirmation-dialog").dialog({
    modal: true,
    autoOpen: false,
    width: 600,
    overlay: {
      backgroundColor: '#000',
      opacity: 0.5
    },
    close: function() {
      $('input[type="submit"]')
      .val('Record Reading')
      .attr('disabled', false);
    },
    buttons: {
      'Confirm Reading': function() {
        if($('#check-box').attr("checked")){
          $(this).dialog('close')
          $('form')
          .addClass('confirmed')
          .submit();
        }else{
          $('#please-check').show("slide");
        }
      }
    }
  });

Anyways, hope that helps someone.

Answer 4

This disables a button:

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

You have to add the dialog id if you have several dialogs on a page.

Answer 5

From a usability perspective, it's usually better to leave the button enabled but show an error message if someone tries to submit an incomplete form. It drives me nuts when the button I want to click is disabled and there is no clue to why.

Answer 6

Just for the records... this post helped me to solve my problem. In short words, you have to set the disabled attribute to disabled, not to false: _send_button.attr('disabled','disabled');

This is how all the code, I also added some styles to make it look disabled:

var _send_button = $('.ui-dialog-buttonpane button:contains(Send)'); var original_text = _send_button.text(); _send_button.text('Please wait...'); _send_button.addClass('ui-state-disabled'); _send_button.attr('disabled','disabled'); _send_button.fadeTo(500,0.2);

Answer 7

Here is my enableOk function for a jQuery dialog:

function enableOk(enable)
{
    var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');

    if (enable) {
        dlgFirstButton.attr('disabled', '');
        dlgFirstButton.removeClass('ui-state-disabled');
    } else {
        dlgFirstButton.attr('disabled', 'disabled');
        dlgFirstButton.addClass('ui-state-disabled');
    }
}

The "first" button is the one furthest to the right. You both disable the button and set the dialog's disabled class, for the proper visual effect.

Answer 8

From a usability perspective, it's usually better to leave the button enabled but show an error message if someone tries to submit an incomplete form. It drives me nuts when the button I want to click is disabled and there is no clue to why.

@erikkallen: For adding new data this is valid, you don't know what you have missed. For a form updating existing data it isn't valid, a disabled submit button shows you that you have not changed anything yet.

Answer 9

I wanted to be able to find the button by name (since I have several buttons in my jQuery UI dialog). I also have several dialogs on the page so I need a way to get the buttons of a specific dialog. Here is my function:

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
                        buttons: {
                                   Cancel: function() { $(this).dialog('close'); },
                                   Submit: function() { ... } 
                             } );

// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
  button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}

Answer 10

Its very simple $(":button:contains('Authenticate')").attr("disabled","disabled");

Answer 11

If you really want to disable a button, I found that you also need to call the .unbind() method on it. Otherwise the button may still be active, and a double-click could lead to multiple form submissions. The following code works for me:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

Answer 12

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').dialog('open');
    $(function(){

        $('#dialog').dialog({
            autoOpen: true,
            width: 400,
            modal: true,
            overlay: {
                opacity: 0.8,
                background: "black"
            },
            resizable: false,
            show: 'slow',
            buttons: {
                //"OK":function() {
                //    window.location="index.php?view=list";
                //},
                "Cancel": function() {
                    $(this).dialog("close");
                    $(this).attr("class", "button");
                }
           }
        });

        var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
        dlgFirstButton.addClass('button');
    });
});
</script>

i think would work with all,

Answer 13

I found an easy way to disable (or perform any other action) on a dialog button.

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

You simply select the parent of your dialog and find all buttons. Then checking the Text of your button, you can identify your buttons.

Answer 14

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

Answer 15

Hi,

I created a jQuery function in order to make this task a bit easier. Probably now there is a better solution... either way, here's my 2cents. :)

Just add this to your JS file:

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
    var text = $(this).text();
    if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
    if(text==name){return this;}
    if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
    if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

Disable button 'Ok' on dialog with class 'dialog':

$('.dialog').dialogButtons('Ok', 'disabled');

Enable all buttons:

$('.dialog').dialogButtons('enabled');

Enable 'Close' button and change color:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

Hope this helps :)

Answer 16

Hey Chris,

In jQuery world, If you wanna select object from set of DOM element you should use eq()

Examples:

var button = $('button').eq(1);

or

var button = $('button:eq(1)');

Hope you still around here,

Goodluck :)