Question

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

您要求启用/禁用按钮的最佳方法。所以我要求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

Answer 2

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

希望有所帮助

Answer 3

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

Answer 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/

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

4 个答案: