What is the easiest way to disable enable buttons and links jQuery Bootstrap

Question

Sometimes I use anchors styled as buttons and sometimes I just use buttons  I want to disable specific clicky-things so that    They look disabled They stop being clicked   How can I do this

User · Answer

The following has worked for me very well       button   attr  disabled    disabled

User · Answer

Buttons  Buttons are simple to disable as disabled is a button property which is handled by the browser    lt input type  submit  class  btn  value  My Input Submit  disabled  gt   lt input type  button  class  btn  value  My Input Button  disabled  gt   lt button class  btn  disabled gt My Button lt  button gt    To disable these with a custom jQuery function  you d simply make use of fn extend        Disable function jQuery fn extend       disable  function state            return this each function                 this disabled   state                            Disabled with     input type  submit    input type  button    button   disable true       Enabled with     input type  submit    input type  button    button   disable false     JSFiddle disabled button and input demo   Otherwise you d make use of jQuery s prop   method      button   prop  disabled   true      button   prop  disabled   false       Anchor Tags  It s worth noting that disabled isn t a valid property for anchor tags  For this reason  Bootstrap uses the following styling on its  btn elements    btn disabled   btn disabled        cursor  default      background-image  none      opacity  0 65      filter  alpha opacity 65       -webkit-box-shadow  none      -moz-box-shadow  none      box-shadow  none      color   333      background-color   E6E6E6      Note how the  disabled  property is targeted as well as a  disabled class  The  disabled class is what is needed to make an anchor tag appear disabled    lt a href  http   example com  class  btn  gt My Link lt  a gt    Of course  this will not prevent links from functioning when clicked  The above link will take us to http   example com  To prevent this  we can add in a simple piece of jQuery code to target anchor tags with the disabled class to call event preventDefault        body   on  click    a disabled   function event        event preventDefault          We can toggle the disabled class by using toggleClass     jQuery fn extend       disable  function state            return this each function                 var  this     this                this toggleClass  disabled   state                             Disabled with     a   disable true       Enabled with     a   disable false     JSFiddle disabled link demo     Combined  We can then extend the previous disable function made above to check the type of element we re attempting to disable using is    This way we can toggleClass   if it isn t an input or button element  or toggle the disabled property if it is      Extended disable function jQuery fn extend       disable  function state            return this each function                 var  this     this               if  this is  input  button  textarea  select                  this disabled   state              else                this toggleClass  disabled   state                             Disabled on all     input  button  a   disable true       Enabled on all     input  button  a   disable false     Full combined JSFiddle demo   It s worth further noting that the above function will also work on all input types

User · Answer

For that kind of behavior I always use the jQueryUI button widget  I use it for links and buttons   Define the tag within HTML    lt button id  sampleButton  gt Sample Button lt  button gt   lt a id  linkButton  href  yourHttpReferenceHere  gt Link Button lt  a gt    Use jQuery to initialize the buttons       sampleButton   button        linkButton   button      Use the button widget methods to disable enable them       sampleButton   button  enable      enable the button     linkButton   button  disable      disable the button   That will take care of the button and cursor behavior  but if you need to get deeper and change the button style when disabled then overwrite the following CSS classes within your page CSS style file    ui-state-disabled   ui-widget-content  ui-state-disabled   ui-widget-header  ui-state-disabled         background-color aqua        color black       But remember  those CSS classes  if changed  will change the style for other widgets too

User · Answer

Suppose you have text field and submit button    lt input type  text  id  text-field    gt   lt input type  submit  class  btn  value  Submit   gt    Disabling   To disable any button  for example  submit button you just need to add disabled attribute as      input type  submit     attr  disabled   disabled      After executing above line  your submit button html tag would look like this    lt input type  submit  class  btn  value  Submit  disabled  gt    Notice the  disabled  attribute has added   Enabling   For enabling button  such as when you have some text in text field  You will need to remove the disable attribute to enable button as    if      text-field   val                    input type  submit     removeAttr  disabled         Now the above code will remove the  disabled  attribute

User · Answer

I know I m late to the party  but to specifically answer the two questions    I just want to disable specific clicky-things so that    They stop clicking They look disabled   How hard can this be    They stop clicking  1  nbsp  For buttons like  lt button gt  or  lt input type  button  gt  you add the attribute  disabled    lt button type  submit  disabled gt Register lt  button gt   lt input type  button  value  Register  disabled gt    2  nbsp  For links  ANY link    actually  any HTML element  you can use CSS3 pointer events    selector   pointer-events none      Browser support for pointer events is awesome by today s state of the art  5 12 14   But we usually have to support legacy browsers in the IE realm  so IE10 and below DO NOT support pointer events  http   caniuse com pointer-events  So using one of the JavaScript solutions mentioned by others here may be the way to go for legacy browsers   More info about pointer events    https   developer mozilla org en-US docs Web CSS pointer-events http   wiki csswg org spec css4-ui pointer-events   They look disabled  Obviously this a CSS answer  so    1  nbsp  For buttons like  lt button gt  or  lt input type  button  gt  use the  attribute  selector   button disabled           input type button  disabled            --  Here s a basic demo with the stuff I mentioned here  http   jsfiddle net bXm5B 4   Hope this helps

User · Answer

If  like me  you just want to disable a button  don t miss the simple answer subtly hidden in this long thread        button   prop  disabled   true

User · Answer

James Donnelly has supplied a comprehensive answer that relies on extending jQuery with a new function  That is a great idea  so I am going to adapt his code so it works the way I need it to   Extending jQuery    fn disable - gt  setState       true   fn enable  - gt  setState       false   fn isDisabled  - gt       hasClass  disabled   setState   el  state  - gt       el each - gt               prop  disabled   state  if      is  button  input          if state then      addClass  disabled   else      removeClass  disabled           body   on  click    a disabled   - gt  false    Usage      btn-stateful   disable       my-anchor   enable     The code will process a single element or a list of elements   Buttons and Inputs support the disabled property and  if set to true  they will look disabled  thanks to bootstrap  and will not fire when clicked    Anchors don t support the disabled property so instead we are going to rely on the  disabled class to make them look disabled  thanks to bootstrap again  and hook up a default click event that prevents the click by returning false  no need for preventDefault see here     Note  You do not need to unhook this event when re-enabling anchors  Simply removing the  disabled class does the trick    Of course  this does not help if you have attached a custom click handler to the link  something that is very common when using bootstrap and jQuery  So to deal with this we are going tro use the isDisabled   extension to test for the  disabled class  like this       my-anchor   click - gt       return false if      isDisabled         do something useful   I hope that helps simplify things a bit

User · Answer

This above does not work because sometimes     this  attr  checked      undefined   adjust your code with  if    this  attr  checked        this  attr  checked      false

User · Answer

Suppose you have these buttons on page like     lt input type  submit  class  byBtn  disabled  disabled  value  Change   gt   lt input type  submit  class  byBtn  disabled  disabled  value  Change   gt   lt input type  submit  class  byBtn  disabled  disabled  value  Change   gt   lt input type  submit  class  byBtn  disabled  disabled  value  Change   gt   lt input type  submit  class  byBtn  disabled  disabled  value  Change   gt   lt input type  submit value  Enable All  onclick  change     gt    The js code   function change       var toenable   document querySelectorAll   byBtn                for  var k in toenable            toenable k  removeAttribute  disabled

User · Answer

I know my answer is late  but IMO this is the easiest way to toggle a Button  enable  and button  disable   function toggleButtonState button        If button is enabled  - gt  Disable   if  button disabled     false        button disabled   true       If button is disabled  - gt  Enable     else if  button disabled     true        button disabled   false

User · Answer

Note that there s a weird problem if you re using Bootstrap s JS buttons and the  loading  state  I don t know why this happens  but here s how to fix it   Say you have a button and you set it to the loading state   var myButton       myBootstrapButton    myButton button  loading      Now you want to take it out of the loading state  but also disable it  e g  the button was a Save button  the loading state indicated an ongoing validation and the validation failed   This looks like reasonable Bootstrap JS   myButton button  reset   prop  disabled   true      DOES NOT WORK   Unfortunately  that will reset the button  but not disable it  Apparently  button   performs some delayed task  So you ll also have to postpone your disabling   myButton button  reset    setTimeout function     myButton prop  disabled   true      0     A bit annoying  but it s a pattern I m using a lot

User · Answer

This is a rather late answer  however I stumbled upon this question while searching for a way to disable boostrap buttons after clicking them and maybe add a nice effect  f e a spinner   I ve found a great library that does exactly that   http   msurguy github io ladda-bootstrap   You just include the required css and js  add some properties to your buttons and enable lada with javascript    Presto   Your buttons have a new life  please check the demo to see how beautiful it is

User · Answer

I can t think a simpler easier way   -     Using Anchor tags  Links      lt a href   delete-modal  class  btn btn-danger  id  delete  gt Delete lt  a gt      To enable the Anchor tag        delete   removeClass  disabled         delete   attr  data-toggle    modal          To disable the Anchor tag        delete   addClass  disabled         delete   removeAttr  data-toggle

User · Answer

Great answer and contributions from all  I had to extend this function slightly to include disabling of select elements   jQuery fn extend   disable  function  state        return this each function              var  this   jQuery this           if   this is  input  button                this disabled   state          else if   this is  select    amp  amp  state               this attr  disabled    disabled            else if   this is  select    amp  amp   state               this removeAttr  disabled            else              this toggleClass  disabled   state                  Seems to be working for me  Thanks all

User · Answer

Say you have that looks like this that is currently enable    lt button id  btnSave  class  btn btn-info  gt Save lt  button gt    Just add this       btnSave   prop  disabled   true     and you will get this which will disable button   lt button id  btnSave  class  btn btn-primary  disabled gt Save lt  button gt

User · Answer

If you want to disable the clickable  you can also add inline this in html  style  cursor  not-allowed

[jquery] What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap