All geek questions in one place

Best way to enable / disable multiple bootstrap buttons (jQuery)

I want to enable and disable the boot buttons. There are 4 buttons on the page, when loading the 1st button is on, and rest is off. Now, when I press button1, the rest of the button should be turned on and button1 disabled.

Below my code, it can turn off the first button, but the rest button is not turned on.

$('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 the tips.

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 the html file. The html file is quite large. So, I just give you the button code. btn-save5, btn-save4, btn-save3m is similar to this.

+4
source share
4 answers

You have requested the best way to turn on / off the button. So I breed Junkie's violin.

Modifications:

. save-button . $('button') 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

+2

, , , , CLASS TAG.

, fiddle. , .

$(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>

+1

JsFiddle Demo

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


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

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

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;
    });
});
+1

, , , , , .

$('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>
Hide result

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

+1
source

Source: https://habr.com/ru/post/1623514/

More articles:


All Articles