Disable Buttons in jQuery Mobile

Question

This is for jQuery Mobile  Not all regular jQuery answers will work   I can t get my buttons to disable in jQuery Mobile   jQuery Mobile says to use     input   button  disable         But I get an error message in Firebug      uncaught exception  cannot call methods on button prior to initialization  attempted to call method  disable     It s in the document ready section of my page so I dont know how it s not initialized yet   I ve tried calling the button directly by its id but that doesn t work   I ve tried      button   attr  disabled    disabled      Doesn t work   I also have a switch command that will enable one button based on what the value is  I ve got that part to where its routing to right  case  statements  but the enable disable buttons thing in jQuery mobile is not working   code  http   pastebin com HGSbpAHQ

User · Answer

For jQuery Mobile 1 4 5   for anchor buttons  the CSS class is  ui-state-disabled  and for input buttons it is just enough to toggle the disabled attribute    x000D   x000D  function toggleDisableButtons     x000D        link-1   toggleClass  ui-state-disabled        link-1   hasClass  ui-state-disabled     x000D        button-1   attr  disabled         button-1   removeAttr  disabled         button-1   attr  disabled       x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  user-scalable no  gt  x000D     lt link rel  stylesheet  href  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 css  gt  x000D     lt script src  https   code jquery com jquery-1 11 2 min js  gt  lt  script gt  x000D     lt script src  https   code jquery com mobile 1 4 5 jquery mobile-1 4 5 js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div data-role  page  id  page-1  gt  x000D     lt div role  main  class  ui-content  gt  x000D       lt button class  ui-btn  onclick  toggleDisableButtons     gt Toggle disabled lt  button gt  x000D       lt a id  link-1  href     class  ui-btn ui-state-disabled  gt Anchor lt  a gt  x000D       lt button id  button-1  disabled    gt Button lt  button gt  x000D       x000D     lt  div gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    BTW  for input buttons  there is an alternate method   Enable       class   prop  disabled   false  removeClass  ui-state-disabled      Disable       class   prop  disabled   true  addClass  ui-state-disabled

User · Answer

You are getting that error probably because the element is not within the DOM yet     document  ready    will not work  Try adding your code to a pageinit event handler   Here is a working example    lt  DOCTYPE html gt    lt html gt    lt head gt       lt title gt Button Disable lt  title gt        lt meta name  viewport  content  width device-width  initial-scale 1    gt       lt link rel  stylesheet  href  http   code jquery com mobile 1 0 jquery mobile-1 0 min css    gt       lt script type  text javascript  src  http   code jquery com jquery-1 6 4 min js  gt  lt  script gt       lt script type  text javascript  src  http   code jquery com mobile 1 0 jquery mobile-1 0 min js  gt  lt  script gt   lt  head gt    lt body gt       lt div id  MyPageId  data-role  page  gt           lt div data-role  header  gt               lt h1 gt Button Disable lt  h1 gt           lt  div gt           lt div data-role  content  gt               lt button id  button1  type  button  onclick  javascript alert   button1 clicked     gt Button 1 lt  button gt               lt button id  button2  type  button  onclick  javascript alert   button2 clicked     gt Button 2 lt  button gt           lt  div gt           lt div data-role  footer  gt               lt p gt footer lt  p gt           lt  div gt       lt  div gt       lt script type  text javascript  gt    lt   CDATA              MyPageId   bind  pageinit   function  event  data                    button1   button  disable                         gt  lt  script gt   lt  body gt   lt  html gt    Hope that helps someone

User · Answer

If I m reading this question correctly  you may be missing that a jQuery mobile  button  widget is not the same thing as an HTML button element  I think this boils down to you can t call    input   button  disable   unless you have previously called     input   button    to initialize a jQuery Mobile button widget on your input   Of course  you may not want to be using jQuery button widget functionality  in which case Alexander s answer should set you right

User · Answer

What seems to be needed is to actually define the button as a button widget    I had the same problem  in beta 1    I did      submitButton   button      in my window ready handler  after that it worked to do as it is said in the docs  i e        submitButton   button  disable       I guess this has to do with that jqm is converting the markup  but isnt actually instatiating a real button widget for buttons and link buttons

User · Answer

For disabling a button add css class disabled to it   write     button   addClass  disabled

User · Answer

I created a widget that can completely disable or present a read-only view of the content on your page   It disables all buttons  anchors  removes all click events  etc   and can re-enable them all back again   It even supports all jQuery UI widgets as well   I created it for an application I wrote at work   You re free to use it    Check it out at   http   www dougestep com dme jquery-disabler-widget

User · Answer

document  ready function                 Set button disabled              save info   button  disable                  name   bind  change   function  event  ui                 var edit       your name   val                var edit surname       your surname   val                console log edit                if  edit       amp  amp  edit surname                          name addClass  hightlight                        save info   button  enable                    console log  enable                     return false                else                        save info   button  disable                     console log  disable                                      lt ul data-role  listview  data-inset  true  data-split-icon  gear  data-split-theme  d  gt           lt li gt               lt input type  text  name  your name  id  your name  class  name  value    placeholder  Frist Name    gt  lt  li gt           lt li gt               lt input type  text  name  your surname  id  your surname   class  name  value    placeholder  Last Name    gt  lt  li gt           lt li gt               lt button data-icon  info  href    data-role  submit  data-inline  true  id  save info  gt              Save lt  button gt    This one work for me you might need to workout the logic  of disable -enable

User · Answer

uncaught exception  cannot call   methods on button prior to   initialization  attempted to call   method  disable     this means that you are trying to call it on an element that is not handled as a button  because no  button method was called on it  Therefore your problem MUST be the selector   You are selecting all inputs    input    so it tries to call the method disable from button widget namespace not only on buttons  but on text inputs too      button   attr  disabled    disabled    will not work with jQuery Mobile  because you modify the button that is hiden and replaced by a markup that jQuery Mobile generates    You HAVE TO use jQueryMobile s method of disabling the button with a correct selector like      div DT1S input type button    button  disable

User · Answer

For link button    Calling  button  enable   method only gives effect  but functionally don t   But I have a trick  We could use HTML5 data- attribute to save swap value of href and onclick   see      http   jsbin com ukewu3 74    source code mode      http   jsbin com ukewu3 74 edit

User · Answer

Try one of the statements below      input type submit    attr  disabled   disabled     or     input type button    attr  disabled   disabled     UPDATE  To target a particular button  given the HTML you provided      div DT1S input type button    attr  disabled   disabled     http   jsfiddle net kZcd8

User · Answer

UPDATE   Since this question still gets a lot of hits I m also adding the current jQM Docs on how to disable the button    http   jquerymobile com demos 1 2 0 docs buttons buttons-methods html   Updated Examples      enable enable a disabled form button       type  submit     button  enable           disable disable a form button       type  submit     button  disable          refresh update the form button If you manipulate a form button via   JavaScript  you must call the refresh method on it to update the   visual styling        type  submit     button  refresh      Original Post Below   Live Example  http   jsfiddle net XRjh2 2   UPDATE   Using  naugtur example below  http   jsfiddle net XRjh2 16   UPDATE  2   Link button example    http   jsfiddle net gRLYQ 6    JS  var clicked   false       myButton   click function         if clicked     false              this  addClass  ui-disabled            clicked   true          alert  Button is now disabled                    enableButton   click function             myButton   removeClass  ui-disabled        clicked   false         HTML   lt div data-role  page  id  home  gt       lt div data-role  content  gt            lt a href     data-role  button  id  myButton  gt Click button lt  a gt           lt a href     data-role  button  id  enableButton  gt Enable button lt  a gt        lt  div gt   lt  div gt    NOTE  - http   jquerymobile com demos 1 0rc2 docs buttons buttons-types html     Links styled like buttons have all the same visual options as true   form-based buttons below  but there are a few important differences    Link-based buttons aren t part of the button plugin and only just use   the underlying buttonMarkup plugin to generate the button styles so   the form button methods  enable  disable  refresh  aren t supported    If you need to disable a link-based button  or any element   it s   possible to apply the disabled class ui-disabled yourself with   JavaScript to achieve the same effect

User · Answer

Based on my findings     This Javascript error occurs when you execute button   on an element with a selector and try to use a function method of button   with a different selector on the same element   For example  here is the HTML    lt input type  submit  name  continue  id  mybuttonid  class  mybuttonclass  value  Continue    gt    So you execute button   on it   jQuery document  ready function     jQuery   mybuttonclass   button          Then you try to disable it  this time not using the class as you initiated it but rather using the ID  then you ll get the error as this thread is titled   jQuery document  ready function     jQuery   mybuttonid   button  option    disabled   true         So rather use the class again as you initiated it  that ll resolve the problem

[jquery] Disable Buttons in jQuery Mobile

Examples related to jquery

Examples related to jquery-mobile