Jquery/bootstrap disable button

Question

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 :)

Erick Gallani · Accepted Answer · 2016-07-15 12:34:33Z

31

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');

answered Jul 15, 2016 at 12:34

Erick Gallani

8091 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Indrasis Datta Over a year ago

Adding such classes isn't the best idea because the user can easily go to the browser's inspect element and remove this "disabled" class. It's the best to write an additional code with return false.

Erick Gallani Over a year ago

All javascript codes runs in the user side. Thinking in a user that will inspect using development tools, this user can change almost anything in the javascript logic. This supposed to be only for better feedback, any type of dangerous behavior should be validate in the backend.

nhershy Over a year ago

Adding the class as @ErickGallani suggests did not remove the click event from the button. What worked for me was doing it the "classic" way: $('#previous').prop("disabled", true);

Hatem Alimam · Accepted Answer · 2017-02-07 09:14:54Z

6

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

edited Feb 7, 2017 at 9:14

Hatem Alimam

10.1k4 gold badges47 silver badges58 bronze badges

answered Jul 15, 2016 at 12:27

Indrasis Datta

8,6182 gold badges18 silver badges32 bronze badges

Comments

ArnabXD · Accepted Answer · 2025-06-20 10:32:43Z

3

Here is the better way to do this .

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

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

edited Jun 20 at 10:32

answered Nov 11, 2020 at 16:27

ArnabXD

5391 gold badge7 silver badges16 bronze badges

Comments

Antonio Petricca · Accepted Answer · 2019-09-29 20:18:27Z

2

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

answered Sep 29, 2019 at 20:18

Antonio Petricca

11.3k6 gold badges47 silver badges91 bronze badges

Comments

Shintu Joseph · Accepted Answer · 2016-07-15 12:32:03Z

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

edited Jul 15, 2016 at 12:32

answered Jul 15, 2016 at 12:26

Shintu Joseph

9627 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery/bootstrap disable button

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related