启用/禁用多个引导按钮的最佳方法（Jquery）答案

【问题标题】：Best way to enable/disable multiple bootstrap button (Jquery)启用/禁用多个引导按钮的最佳方法（Jquery）
【发布时间】：2016-04-13 22:26:01
【问题描述】：

我想启用和禁用引导按钮。页面上有 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 类似这样。

【问题讨论】：

请参考此链接以获得您的解决方案。 stackoverflow.com/questions/16777003/…
我检查了该链接，但问题是我正在使用 .prop 但它不起作用。我的代码似乎有些问题。我无法找到。
请发布您的 html，或者更好的是，将其发布到 jsfiddle.net，因为这取决于您的 id 和 class 属性是否与 jquery 选择器匹配。

标签： jquery twitter-bootstrap

【解决方案1】：

我找不到您选择其他按钮的位置，您似乎需要一个带有 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>

希望对你有所帮助

【讨论】：

【解决方案2】：

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

你的完整脚本

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

【讨论】：

【解决方案3】：

您要求启用/禁用按钮的最佳方式。所以我要分叉 Gianca 的小提琴。

修改：

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

【讨论】：

【解决方案4】：

我不明白你想从哪里执行代码，我举了两个例子，希望能满足你的问题。

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

【讨论】：