Best way to disable button in Twitter s Bootstrap

Question

I am confused when it comes to disabling a  lt button gt    lt input gt  or an  lt a gt  element with classes   btn or  btn-primary  with JavaScript jQuery   I have used a following snippet to do that      button   addClass  btn-disabled       button   attr  disabled    disabled       button   prop  disabled   true     So  if I just provide the    button   addClass  btn-disabled    to my element  it will appear as disabled  visually  but the functionality will remain the same and it will be clickable nontheless  so that it the reason why I added the attr and prop settings to the element   Has anyone expirenced this same issue out there  Is this the right way of doing this - while using Twitter s Bootstrap

User · Answer

lt div class  bs-example  gt         lt button class  btn btn-success btn-lg  type  button  gt Active lt  button gt         lt button class  btn btn-success disabled  type  button  gt Disabled lt  button gt   lt  div gt

User · Answer

You just need the    button   prop  disabled   true   part  the button will automatically take the disabled class

User · Answer

The easiest way to do this  is to use the disabled attribute  as you had done in your original question    lt button class  btn btn-disabled  disabled gt Content of Button lt  button gt   As of now  Twitter Bootstrap doesn t have a method to disable a button s functionality without using the disabled attribute   Nonetheless  this would be an excellent feature for them to implement into their javascript library

User · Answer

Building off jeroenk s answer  here s the rundown      button   addClass  disabled       Disables visually    button   prop  disabled   true      Disables visually   functionally     input type button    addClass  disabled       Disables visually    input type button    prop  disabled   true      Disables visually   functionally     a   addClass  disabled       Disables visually    a   prop  disabled   true      Does nothing    a   attr  disabled    disabled       Disables visually   See fiddle

User · Answer

For input and button      button   prop  disabled   true     For anchor      a   attr  disabled   true     Checked in firefox  chrome   See http   jsfiddle net czL54 2

User · Answer

What ever attribute is added to the button anchor link to disable it  bootstrap is just adding style to it and user will still be able to click it while there is still onclick event  So my simple solution is to check if it is disabled and remove add onclick event   if      button   hasAttr  disabled         button   attr  onclick    someFunction       else      button   removeattr  onclick

[javascript] Best way to disable button in Twitter's Bootstrap

Examples related to javascript

Examples related to jquery

Examples related to button

Examples related to twitter-bootstrap