Disable button in jQuery

Question

My page creates multiple buttons as id    rbutton   i     Below is my code    lt button type  button  id    rbutton   i    onclick disable i   gt Click me lt  button gt    In Javascript  function disable i           rbutton  i     attr  disabled   disabled        But it doesn t disable my button when I click on it

User · Answer

Try this code      HTML   lt button type  button  id    rbutton   i onclick  disable i   gt Click me lt  button gt    function   function disable i           rbutton   i  attr  disabled   disabled          Other solution with jquery     button   click function           this  attr  disabled   disabled          DEMO    Other solution with pure javascript   lt button type  button  id    rbutton 1  onclick  disable 1   gt Click me lt  button gt    lt script gt  function disable i    document getElementById  rbutton   i  setAttribute  disabled   disabled       lt  script gt    DEMO2

User · Answer

I want to disable button on some condition  i am using 1st solution but it won t work for me  But when I use 2nd one it worked Below are outputs from browser console   1      psl2  btn-continue   prop  disabled   true    lt a class   btn btn-yellow btn-continue  href      gt  Next  lt  a gt     2      psl2  btn-continue   attr  disabled   disabled     lt a class   btn btn-yellow btn-continue  href      disabled   disabled  gt  Next  lt  a gt

User · Answer

This works for me    lt script type  text javascript  gt  function change        document getElementById  submit   disabled   false     lt  script gt

User · Answer

For Jquery UI buttons this works        buttonId   button   option    disabled   true   false

User · Answer

There are two things here  and the highest voted answer is technically correct as per the OPs question   Briefly summarized as      some sort of selector   prop  disabled   true   false     However should you be using jQuery UI  I know the OP wasn t but some people arriving here might be  then while this will disable the buttons click event it wont make the button appear disabled as per the UI styling   If you are using a jQuery UI styled button then it should be enabled   disabled via      some sort of selector   button  enable     disable      http   api jqueryui com button  method-disable

User · Answer

This is the simplest way in my opinion    x000D   x000D     All buttons where id contains  rbutton   x000D  const  buttons      button id   rbutton       x000D   x000D    Selected button onclick x000D   buttons click function     x000D        this  prop  disabled   true     disable clicked button x000D      x000D   x000D    Enable button onclick x000D      enable   click      gt  x000D       buttons prop  disabled   false    enable all buttons x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button id  rbutton 200  gt click lt  button gt  x000D   lt button id  rbutton 201  gt click lt  button gt  x000D   lt button id  rbutton 202  gt click lt  button gt  x000D   lt button id  rbutton 203  gt click lt  button gt  x000D   lt button id  rbutton 204  gt click lt  button gt  x000D   lt button id  rbutton 205  gt click lt  button gt  x000D   lt button id  enable  gt enable lt  button gt  x000D   x000D   x000D

User · Answer

Use  prop instead  and clean up your selector string    function disable i           rbutton   i  prop  disabled  true       generated HTML    lt button id  rbutton 1  onclick  disable 1   gt Click me lt  button gt   lt  -- wrap your onclick in quotes -- gt      But the  best practices  approach is to use JavaScript event binding and this instead  x000D   x000D      rbutton   on  click  function     x000D        this  prop  disabled  true   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt button class  rbutton  gt Click me lt  button gt  x000D   x000D   x000D    http   jsfiddle net mblase75 2Nfu4

User · Answer

disable button       button id   attr  disabled   disabled      enable button       button id   removeAttr  disabled

User · Answer

Simply it s work fine  in HTML    lt button type  button  id  btn CommitAll class  btn CommitAll  gt save lt  button gt    In JQuery side put this function for disable button   function disableButton             btn CommitAll   prop  disabled   true       For enable button   function enableButton             btn CommitAll   prop  disabled   false       That s all

User · Answer

Try this    function disable i           rbutton   i  attr  disabled  true

User · Answer

Here s how you do it with ajax       updatebtn   click function              updatebtn   prop  disabled   true       urlToHandler    update ashx               jsonData   data                ajax                   url  urlToHandler                  data  jsonData                  dataType   json                   type   POST                   contentType   application json                   success  function  data                            lbl   html data response                           updatebtn   prop  disabled   false                         setAutocompleteData data response                                      error  function  data  status  jqXHR                        alert  There was an error                             updatebtn   prop  disabled   false                                        end   ajax

[jquery] Disable button in jQuery

Examples related to jquery