How can I disable a button on a jQuery UI dialog

Question

How do I go about disabling a button on the jQuery UI dialog  I can t seem to find this in any of the documentation in the link above   I have 2 buttons on the modal confirmation   Confirm  and  Cancel    In certain cases  I want to disable the  Confirm  button

User · Answer

The way I do it is  Cancel  function e                e target  attr   disabled   disabled                This is the shortest and easiest way I found

User · Answer

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  amp  amp  state   disabled      this  attr  disabled  true  addClass  ui-state-disabled   return this       if text  name  amp  amp  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      Text on all buttons red       dialog   dialogButtons   css  color   red      Hope this helps

User · Answer

function getDialogButton  jqUIdialog  button names         if  typeof button names     string           button names    button names       var buttons   jqUIdialog parent   find   ui-dialog-buttonpane button        for  var i   0  i  lt  buttons length  i                  var jButton      buttons i             for  var j   0  j  lt  button names length  j                if   jButton text      button names j                    return jButton             return null     function enableDialogButton  jqUIdialog  button names  enable         var button   getDialogButton  jqUIdialog  button names        if  button    null          alert  button not found    button names       else               if  enable              button removeAttr  disabled   removeClass   ui-state-disabled             else             button attr  disabled    disabled   addClass   ui-state-disabled

User · Answer

You could do this to disable the first button for example       ui-dialog-buttonpane button first   attr  disabled    disabled

User · Answer

Looks like anyone  even in this linked question  have proposed this solution  similar to the first part of the answer given by Nick Craver       dialog   dialog       width  480      height   auto       buttons                          id   button-cancel               text   Cancel               click  function                       this  dialog  close                                                   id   button-ok               text   Ok               click  function                       this  dialog  close                                        Then  elsewhere  you should be able to use the API for the jquery UI button       button-ok   button  disable

User · Answer

You can overwrite the buttons array and left only the ones you need        selector    dialog   option    buttons          text   Close       click  function       this  dialog  close

User · Answer

If you re including the  button   plugin widget that jQuery UI contains  if you have the full library and are on 1 8   you have it   you can use it to disable the button and update the state visually  like this       ui-dialog-buttonpane button contains  Confirm     button  disable      You can give it a try here   or if you re on an older version or not using the button widget  you can disable it like this       ui-dialog-buttonpane button contains  Confirm     attr  disabled   true                                                 addClass  ui-state-disabled        If you want it inside a specific dialog  say by ID  then do this       dialogID   next   ui-dialog-buttonpane button contains  Confirm                    attr  disabled   true     In other cases where  contains   might give false positives then you can use  filter   like this  but it s overkill here since you know your two buttons   If that is the case in other situations  it d look like this       dialogID   next   ui-dialog-buttonpane button   filter function       return   this  text       Confirm      attr  disabled   true     This would prevent  contains   from matching a substring of something else

User · Answer

The following works from within the buttons click function     function             dialog   dialog           height   auto   width  700  modal  true          buttons                 Add to request list   function evt                        get DOM element for button                 var buttonDomElement   evt target                     Disable the button                   buttonDomElement  attr  disabled   true                       form   submit                                Cancel   function                       this  dialog  close

User · Answer

this code disable the button with  YOUR BUTTON LABEL   you can replace name in contains    to disable      ui-dialog-buttonpane button contains  YOUR BUTTON LABEL     button  disable      replace  YOUR BUTTON LABEL  with your button s label  to enable      ui-dialog-buttonpane button contains  YOUR BUTTON LABEL     button  enable

User · Answer

This worked for me --      dialog-confirm   html  Do you want to permanently delete this          dialog-confirm    dialog       resizable  false      title  Confirm       modal  true      buttons            Cancel  function                    this   dialog   close                        OK function                    loading   show                  ajax                       type  post                       url  ajax php                       cache false                      data  action  do something                        async true                      success function data                           var resp   JSON parse data                               loading   hide                                dialog-confirm   html resp msg                                dialog-confirm    dialog                                   resizable  false                                  title  Confirm                                   modal  true                                  buttons                                        Close  function                                                this   dialog   close

User · Answer

You can also use the not now documented disabled attribute       element   dialog       buttons                  text   Confirm           disabled  true          id   my-button-1                        text   Cancel           id   my-button-2           click  function                                 this  dialog  close                              To enable after dialog has opened  use       my-button-1   attr  disabled   false     JsFiddle  http   jsfiddle net xvt96e1p 4

User · Answer

If you re using knockout  then this even cleaner  Imagine you have the following    x000D   x000D  var dialog       my-dialog   dialog   x000D      width   100    x000D      buttons    x000D            text   Submit   click    noop   data-bind    enable  items    amp  amp  items   length  gt  0  click  onSubmitClicked     x000D            text   Enable Submit   click    noop   data-bind    click  onEnableSubmitClicked    x000D        x000D      x000D   x000D  function ViewModel dialog    x000D      var self   this  x000D   x000D      this items   ko observableArray      x000D   x000D      this onSubmitClicked   function      x000D          dialog dialog  option    title    On Submit Clicked     x000D         x000D   x000D      this onEnableSubmitClicked   function      x000D          dialog dialog  option    title    Submit Button Enabled     x000D          self items push  TEST ITEM    x000D          dialog text  Submit button is enabled     x000D         x000D    x000D   x000D  var vm   new ViewModel dialog   x000D  ko applyBindings vm  dialog parent   0      Don t forget to bind to the dialog parent  or the buttons won t get bound  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href    ajax googleapis com ajax libs jqueryui 1 11 2 themes smoothness jquery-ui css    gt  x000D   lt script src    ajax googleapis com ajax libs jqueryui 1 11 2 jquery-ui min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 2 0 knockout-min js  gt  lt  script gt  x000D   x000D   lt div id  my-dialog  gt  x000D    Submit button is disabled at initialization  x000D   lt  div gt  x000D   x000D   x000D    The magic comes from the jQuery UI source        lt button gt  lt  button gt    props     You can basically call ANY jQuery instance function by passing it through the button object   For example  if you want to use HTML     html    lt span class  fa fa-user  gt  lt  span gt User      Or  if you want to add a class to the button  you can do this multiple ways      addClass   my-custom-button-class      Maybe you re nuts  and you want to remove the button from the dom when it s hovered     mouseover  function        this  remove            I m really surprised that no one seems to have mentioned this in the countless number of threads like this

User · Answer

A button is identified by the class ui-button  To disable a button       myButton   addClass  ui-state-disabled   attr  disabled   true     Unless you are dynamically creating the dialog  which is possible   you will know the position of the button  So  to disable the first button       myButton eq 0    addClass  ui-state-disabled   attr  disabled   true     The ui-state-disabled class is what gives a button that nice dimmed style

User · Answer

You can disable a button when you construct the dialog    x000D   x000D    function     x000D        dialog   dialog   x000D      modal  true  x000D      buttons    x000D          text   Confirm   click  function       this  dialog  close       disabled  true    x000D          text   Cancel   click  function       this  dialog  close        x000D        x000D        x000D      x000D   import url  https   code jquery com ui 1 11 4 themes smoothness jquery-ui min css    x000D   lt script src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt  x000D   x000D   lt div id  dialog  title  Confirmation  gt  x000D     lt p gt Proceed  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Or you can disable it anytime after the dialog is created    x000D   x000D    function     x000D        dialog   dialog   x000D      modal  true  x000D      buttons    x000D          text   Confirm   click  function       this  dialog  close        class    confirm     x000D          text   Cancel   click  function       this  dialog  close        x000D        x000D        x000D    setTimeout function     x000D          dialog   dialog  widget   find  button confirm   button  disable    x000D       2000   x000D      x000D   import url  https   code jquery com ui 1 11 4 themes smoothness jquery-ui min css    x000D   lt script src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt  x000D   x000D   lt div id  dialog  title  Confirmation  gt  x000D     lt p gt Button will disable after two seconds  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[jquery] How can I disable a button on a jQuery UI dialog?

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-dialog