Лучший способ включения/выключения нескольких кнопок начальной загрузки (JQuery)

Question

Я хочу включить и отключить кнопки начальной загрузки. На странице есть 4 кнопки, при загрузке включена 1-я кнопка, и отдых отключен. Теперь, когда я нажимаю на кнопку1, остальная часть кнопки должна быть включена, а кнопка1 отключена.

Ниже мой код он может отключить первую кнопку, но кнопка отдыха не включена.

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

Спасибо за ваш посоветуйте

Edit

<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

Вы просили лучший способ включить/выключить кнопку. Поэтому я развожу скрипку Джанки.

Модификации:

Укажите специальный класс для тех, кто деактивирует кнопку. Например, 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

Я не могу найти, где вы выбираете другие кнопки, кажется, вы вызываете элемент с идентификатором, а не для 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/