удалить отключенный атрибут входного тега в цикле, используя jquery

Question

Я пытаюсь удалить отключенный атрибут входов один за другим, используя циклы и идентификатор входа как селектор запросов, но он не работает, как предполагалось.Мне удалось обойтись без циклов, но тогда я должен написать 3 разных кода для этого.пожалуйста помоги.Благодарю.Редактировать: Событие keyup переключит отключенный атрибут в следующем поле ввода.Например, если 1-й вход не пуст, атрибут отключен во 2-м поле ввода будет удален.И когда 1-й вход пуст, 2-й вход снова будет отключен.Это относится к 3-му и 4-му полям ввода.

var inputs = $('input');
for (var i = 0; i < inputs.length; i++) {
 console.log('#'+inputs[i].id); //  print id1, id2, id3, id4
 console.log('#'+inputs[i+1].id); // print id2, id3, id4
 
   var x = '#'+inputs[i].id;
  var y = '#'+inputs[i+1].id;

$(x).keyup(function() {
    if ($(x).val() != '') {
      $(y).attr( "disabled", false );
    } else {
      $(y).attr("disabled", true);
    }
  })
  }
  
  // what I want my code to be like but in loops
  
  $("#id1").keyup(function() {
    if ($("#id1").val() != '') {
      $("#id2").attr( "disabled", false );
    } else {
      $("#id2").attr("disabled", true);
    }
  })

$("#id2").keyup(function() {
    if ($("#id2").val() != '') {
      $("#id3").attr( "disabled", false );
    } else {
      $("#id3").attr("disabled", true);
    }
  })

$("#id3").keyup(function() {
    if ($("#id3").val() != '') {
      $("#id4").attr( "disabled", false );
    } else {
      $("#id4").attr("disabled", true);
    }
  })
  
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="id1">
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>
<input type="text" id="id4" disabled>

Answer 1

Я предполагаю, что это то, что вы пытаетесь достичь?

Редактировать

В отличие от других решений, это автоматически переключает отключенные свойства во всех полях ввода, а нетолько тот, который находится рядом с тем, который вызвал событие keyup.

// Declare the inputs array.
let inputs = [];


// A function to check if an input field is empty or not. 
const isEmpty = el => el.value.replace(/\ /) === '';


// A function that iterates over the input array, disabling the relevant fields.
const toggleDisabled = () => {
  let disableRemainder = false;
  inputs.forEach((el, j) => {
    const next = inputs[j + 1] || {};
    if (!disableRemainder) disableRemainder = isEmpty(el);
    next.disabled = disableRemainder;
  });
};


// A function to hanlde the on key up event. 
const onKeyUpHandler = e => {
  const me = e.target;
  const index = me.id.replace(/\D/g, '');
  const value = me.value.replace(/\ /g, '');
  toggleDisabled();
};


// A function to initially add the event handler to the event on the 
// inputs. 
const dispatchEvents = () => inputs.forEach(el => el.onkeyup = onKeyUpHandler);


// Run the above code when the DOM is ready. 
$(document).ready(() => {
  inputs = document.querySelectorAll("input"); // Update the value. 
  dispatchEvents();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="id0">
<input type="text" id="id1" disabled>
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>

Answer 2

это то, что вы пытаетесь выполнить?

$('input').keyup(function() {
  $(this).next('input').attr('disabled', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="id1">
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>
<input type="text" id="id4" disabled>

В таком случае вам не нужен цикл для этого с jQuery.

Answer 3

если id является уникальным , попробуйте этот способ.

if ($("#id3").val() != '') {
     $("#id3").prop('disabled', false);
    } else {     
    $("#id3").prop('disabled', true);
    }

Я надеюсь, что вы будете полезны ..

Answer 4

Вы не можете перебрать неизвестное количество идентификаторов.Если идентификаторы не являются статичными и известны вам, присвойте этим элементам дополнительный класс, например class="mySpecialItem".Затем запросите класс, а не идентификатор, поэтому $(".mySpecialItem").Это вернет массив (то есть «список»), который вы можете просто циклически проходить и делать вещи для каждой записи :) Просто для пояснения: id используется для уникального выбора и различения только этого одного элемента.Если вы хотите иметь «группу», используйте class.