启用/禁用多个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。

- Roxx

---

请参考此链接以获取解决方案。https://dev59.com/vGQn5IYBdhLWcg3wg3WR - Mahavir Kumbharvadia

我检查了那个链接，但问题是我正在使用.prop，但它不起作用。似乎是我的代码出了一些问题，我找不到原因。 - Roxx

请发布您的HTML代码，或最好在http://jsfiddle.net/上发布它，因为这取决于您的id和class属性是否与jquery选择器匹配。 - Nick De Beer

Answer 1

您询问了启用/禁用按钮的最佳方法。因此，我在 Gianca 的 fiddle 上进行了 fork。

修改如下：

针对那些被禁用的按钮指定一个专用类，例如下面的示例中使用的 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

- Rajender Joshi

Answer 2

我不明白您想要执行代码的位置，我提供了两个示例，希望能满足您的问题。

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

这是示例代码： https://jsfiddle.net/kodedsoft/0e444ujo/5/

- wui

Answer 3

我找不到你选择其他按钮的地方，似乎你调用的是一个ID元素而不是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>

希望有所帮助。

- Gianca

Answer 4

JsFiddle演示

删除此代码

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

你的完整脚本

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

- Uttam Kumar Roy