Jquery / bootstrap disable button

Question

Hi, I was looking for a solution using jQuery or changing the bootstrap twitter class so that the button does not execute its onclick action and does not disable it. However, the results of iv, found so far, did not work correctly and basically only showed the possibility of shutdown, but still performed correctly:

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

The goal is to prevent tabs from switching when the tab index is too high or too low. Most other solutions seem to contain a huge amount of what Javascript would not seem to be necessary for a function that seems relatively simple.

For instance:

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

which should remove the associated function, however this also means reconnecting the event when the tab index increases. Is there a simpler solution to temporarily disable a button or simply prevent a default action from being performed without deleting an event or not displaying a button element?

Any help would be appreciated :)

Answer 1

If you use twitter bootstrap, this is exactly what is already implemented for you.

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

how

$("#previous").addClass('disabled');

Answer 2

. .

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

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

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});

Answer 3

, event.preventDefault()

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

Answer 4

:

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;
}