Best way to enable/disable multiple bootstrap button (Jquery)

Question

I want to enable and disable bootstrap buttons. There are 4 buttons on the page, On load, the 1st button is enabled and rest are disabled. Now when I click on button1 then rest of the button should be enabled and button1 will disabled.

Below is my code it can disable the first button but rest button are not enabling.

$('document').ready(function() {
    $("#add_resume1").on("submit", function(e) {                
        e.preventDefault;
        var btn = $('#btn-save1');
        // btn.button('loading');
        $.ajax({
            type: 'post',
            url:$('form#add_resume1').attr('action'),
            cache: false,
            dataType: 'json',
            data: $('form#add_resume1').serialize(),
            beforeSend: function() { 
                $("#validation-errors").hide().empty(); 
            },
            success: function(data) {
                if(data.success == false) {
                    var arr = data.errors;
                    $.each(arr, function(index, value) {
                        if (value.length != 0) {
                            $("#validation-errors").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                            $('#basicdetails').val('');
                            $('#button.disabled[disabled=disabled]')
                                .removeClass('disabled')
                                .prop('disabled', false);
                                //.text('Click Me');
                        }
                    });
                    $("#validation-errors").show(); 
                    btn.button('reset');                            
                } else {
                    $("#success").html('<div class="alert alert-success">Basic details saved successfully.<div>');
                    $('#basicdetails').val('');
                    $('#btn-save1').prop('disabled', true);
                    $('#button.disabled[disabled=disabled]')
                        .removeClass('disabled')
                        .prop('disabled', false);
                }
            },
            error: function(xhr, textStatus, thrownError) {
                //alert('Something went to wrong.Please Try again later...');
                alert(thrownError);
                btn.button('reset');
            }
        });             
        return false;
    });
});

Thanks for your advise

Edit

<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save5" disabled="disabled" required="required">Save</button>

this is the button code in html file. html file is quite big. So, i am just giving you the button code. btn-save5, btn-save4, btn-save3m similar like this.

Please refer this link for your solution. http://stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-enable-buttons-and-links-jquery-bootstrap — Mahavir Kumbharvadia, Jan 09 '16 at 06:49
I checked that link but problem is i am using .prop but it is not working. It seems like some issue with my code. that i am not able to find out. — Roxx, Jan 09 '16 at 06:54
Please post your html, or better yet, post it on http://jsfiddle.net/ because it depends if you id and class attributes are matching the jquery selectors. — Nick De Beer, Jan 09 '16 at 07:26

score 2 · Accepted Answer · answered Jan 09 '16 at 08:34

You asked for best way to enable/disable button. So I am forking Gianca's fiddle.

Modifications:

Specify a dedicated class to those disabled button. Like save-button in example below. Otherwise $('button') will affect the whole DOM.

<button type="submit" class="btn btn-home save-button" name= "btn-save5" id= "btn-save5" disabled required="required">Save</button>

<button type="submit" class="btn btn-home save-button" name= "btn-save5" id= "btn-save4" disabled required="required">Save</button>

<button type="submit" class="btn btn-home save-button" name= "btn-save5" id= "btn-save3" disabled required="required">Save</button>

jQuery:

$('.btn.btn-home.save-button')
        .removeClass('disabled')
        .prop('disabled', false);
      $('#add_resume1').prop('disabled', true);
    });

Fiddle

score 1 · Answer 2 · answered Jan 09 '16 at 08:24

I can't find where you select the other buttons, it seems you call for an element with an ID and not for a CLASS or TAG.

Anyway give a look at this fiddle. I had to cut some parts and left just the necessary to make it works there.

$(document).ready(function() {
    $("#add_resume1").on("click", function(e) {                
        e.preventDefault;
        //your ajax here
      $("#success").html('<div class="alert alert success">Basic details saved successfully.<div>');
      $('#basicdetails').val('');
      $('button')
        .removeClass('disabled')
        .prop('disabled', false);
      $('#add_resume1').prop('disabled', true);
    });
});

HTML

<button type="submit" class="btn btn-home" name= "btn-save5" id= "add_resume1" required="required">Click</button>

<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save5" disabled required="required">Save</button>

<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save4" disabled required="required">Save</button>

<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save3" disabled required="required">Save</button>

Hope to be helpfull

Uttam Kumar Roy · Answer 3 · 2016-01-09T08:39:49.883

JsFiddle Demo

Remove this code

$('#btn-save1').prop('disabled', true);
$('#button.disabled[disabled=disabled]')
    .removeClass('disabled')
    .prop('disabled', false);

Add this code

$(':input:button').each(function() {
    $(this).prop('disabled', false);
});

$('#btn-save1').prop('disabled', true);

Your full script

$('document').ready(function() {
    $("#add_resume1").on("submit", function(e) {                
        e.preventDefault;
        var btn = $('#btn-save1');
        // btn.button('loading');
        $.ajax({
            type: 'post',
            url:$('form#add_resume1').attr('action'),
            cache: false,
            dataType: 'json',
            data: $('form#add_resume1').serialize(),
            beforeSend: function() { 
                $("#validation-errors").hide().empty(); 
            },
            success: function(data) {
                if(data.success == false) {
                    var arr = data.errors;
                    $.each(arr, function(index, value) {
                        if (value.length != 0) {
                            $("#validation-errors").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                            $('#basicdetails').val('');
                            $('#button.disabled[disabled=disabled]')
                                .removeClass('disabled')
                                .prop('disabled', false);
                                //.text('Click Me');
                        }
                    });
                    $("#validation-errors").show(); 
                    btn.button('reset');                            
                } else {
                    $("#success").html('<div class="alert alert-success">Basic details saved successfully.<div>');
                    $('#basicdetails').val('');

                    //$('#btn-save1').prop('disabled', true);
                    /*$('#button.disabled[disabled=disabled]')
                        .removeClass('disabled')
                        .prop('disabled', false);*/
                    // Add this code
                    $(':input:button').each(function() {
                        $(this).prop('disabled', false);
                    });

                    $('#btn-save1').prop('disabled', true);  
                }
            },
            error: function(xhr, textStatus, thrownError) {
                //alert('Something went to wrong.Please Try again later...');
                alert(thrownError);
                btn.button('reset');
            }
        });             
        return false;
    });
});

wui · Answer 4 · 2016-01-09T10:09:02.763

I did not understand from where you want to execute code, I have put up two examples which I hope can satisfy your question.

$('document').ready(function() {
    
    $("#add_resume1").on("click", function(e) { 
        var size = $(".btn-cta").size()-1;
        var enabled = $( ".btn-cta:enabled" ).next();
        // remove the next line if u donot want it to be cyclic
        if(enabled.index()> size) enabled = $( ".btn-cta" ).eq(0);
        $(".btn-cta").prop("disabled",true);
        $(enabled).prop("disabled",false);
        

    });

    $(".btn-cta2").on("click", function(e) { 
        var size2 = $(".btn-cta2").size()-1;
        var enabled = $(this ).next();
        var enabledIndex = $(".btn-cta2").index(this)+1;
        if(enabledIndex > size2) enabled = $( ".btn-cta2" ).eq(0);
        $(".btn-cta2").prop("disabled",true);
        $(enabled).prop("disabled",false);
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save1" id= "btn-save1"  required="required">Save1</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save2" id= "btn-save2" disabled="disabled" required="required">Save2</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save3" id= "btn-save3" disabled="disabled" required="required">Save3</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save4" id= "btn-save4" disabled="disabled" required="required">Save4</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save5" id= "btn-save5" disabled="disabled" required="required">Save5</button>
<input type="submit" class="btn btn-home" name= "add_resume1" id= "add_resume1" value="submit" >
<br/>

OR
<br/>

<button type="submit" class="btn btn-home btn-cta2" name= "btn-save11" id= "btn-save11"  required="required">Save1</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save12" id= "btn-save12" disabled="disabled" required="required">Save2</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save13" id= "btn-save13" disabled="disabled" required="required">Save3</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save14" id= "btn-save14" disabled="disabled" required="required">Save4</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save15" id= "btn-save15" disabled="disabled" required="required">Save5</button>

here is the fiddle: https://jsfiddle.net/kodedsoft/0e444ujo/5/

Best way to enable/disable multiple bootstrap button (Jquery)

4 Answers4