jquery - 启用/禁用多个 Bootstrap 按钮的最佳方法(Jquery)

Question

我想启用和禁用 Bootstrap 按钮。页面上有 4 个按钮，加载时，第一个按钮启用，其余按钮禁用。现在，当我单击“button1”时，按钮的其余部分应该启用，而“button1”将被禁用。

下面是我的代码，它可以禁用第一个按钮，但其余按钮未启用。

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

感谢您的建议

编辑

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

这是 html 文件中的按钮代码。 html 文件相当大。所以，我只是给你按钮代码。 btn-save5、btn-save4、btn-save3m 类似。

Answer 1

您询问启用/禁用按钮的最佳方法。所以我要 fork Gianca 的 fiddle 。

修改:

为那些禁用的按钮指定一个专用类。就像下面例子中的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