Twitter Bootstrap Question posted in

Jquery/bootstrap disable button – Twitter bootstrap

Hey iv been looking for a solution using JQuery or by modifying the twitter bootstrap class to prevent a button from performing its onclick action aka disabling it. However the results iv found so far have not performed correctly and mostly only give an appearance of being disabled but still perform correctly:

$("#previous").prop('disabled', true);
$("#next").prop('disabled', true);

The purpose is to prevent swapping tabs when the tab index is too high or too low. Most other solutions seem to contain huge amounts of what is seemingly unnecessary Javascript for a feature that seems relatively simple.

Such as this :

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})

Which is supposed to remove the bound function, however would mean also reattaching the event when the tab index increases. Is there a simpler solution available to temporarily disable a button or just prevent the default action from being carried out without removing the event or not displaying the button element?

Any help would be appreciated 🙂

Tags:

5

Answers


  1. 0

    You would have to prevent the default action using event.preventDefault()

    $("#previous").click(function(event) {
  //add logic to attach style behavior here or conditionally prevent default
      event.preventDefault();    
});
    Login or Signup to reply.
  2. 0

    Let me show a simple example. Here, a button becomes disabled once you click it.

    <button class="btn btn-danger">Click Me</button>

$('.btn-danger').on('click', function() {

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});
    Login or Signup to reply.
  3. 0

    If you are using twitter bootstrap there is this exactly behavior already implemented for you.

    You just need to change the class .disabled of the element you want to disable.

    Like:

    $("#previous").addClass('disabled');
    Login or Signup to reply.
  4. 0

    Here is my solution:

    Javascript

    jQuery.fn.extend( {

    bsButtonSetStatus : function( status ) {
        if ( status ) {
            this.removeClass( 'disabled' );
        } else {
            this.addClass( 'disabled' );
        }
    },

} );

    CSS

    .btn.disabled,
.btn:disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.25;
    pointer-events: none;
}
    Login or Signup to reply.
  5. 0

    Here is the best way to do this .

    $("#previous").prop({disabled: true});

    using this actually disables the button ,not only adding a class for faded view

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search