Question

我正在尝试使用循环和输入的ID作为查询选择器来一一删除输入的禁用属性，但是它没有按预期工作。我设法做到没有循环，但随后我必须为此编写3个不同的代码。请帮忙。谢谢。编辑：keyup事件将在下一个输入字段上切换禁用属性。例如，如果第一个输入不为空，则第二个输入字段的禁用属性将被删除。当第一个输入为空时，第二个输入将再次被禁用。这适用于第三和第四输入字段。

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

这是您要执行的吗？

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

您不能循环访问未知数量的ID。如果这些ID不是固定的并且为您所知，请为这些元素提供一个附加类，例如class="mySpecialItem"。然后查询类而不是ID，$(".mySpecialItem")。这将返回一个数组（即一个“列表”），您可以遍历该数组并为每个条目做一些事情:) 为了澄清起见：id仅用于唯一地选择和区分该一项。如果您想拥有一个“小组”，请使用class。

Answer 3

如果id是唯一，请尝试这种方式。

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

希望您会有所帮助。

Answer 4

我假设这是您要实现的目标？

编辑

与其他解决方案不同，该解决方案将自动在所有输入字段上切换禁用的属性，而不仅仅是触发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>

使用jQuery删除循环内输入标签的禁用属性

4 个答案:

编辑