javascript - 如何一次为多个标签设置属性

Question

我该如何设置 3 个单独的输入标签以同时禁用？用户输入时间后，我想禁用输入字段，然后在时间用完时启用它们。我知道如何添加逻辑，我只是​​很难一次向所有逻辑添加“禁用”。

<div id="inputFields">
    <h3>Enter Time</h3>
    <input id="hours" type="text" value="" name="hours" placeholder="Hours" maxlength="2"> <span>:</span>
    <input id="minutes" type="text" value="" name="min" placeholder="Minutes" maxlength="2"> <span>:</span>
    <input id="seconds" type="text" value="" name="seconds" placeholder="Seconds" maxlength="2">
</div>

我必须循环遍历它们吗？或者我可以将它们作为#inputFields 的子项访问吗？或者两者都不是？任何建议将不胜感激...谢谢。

Answer 1

如果您使用的是 jQuery:

$('#inputFields > input').prop('disabled', true);

它为每个 input 设置属性，该属性是 #inputFields 的直接后代。

另一种选择:

$('#hours,#minutes,#seconds').prop('disabled', true);

或者如果使用纯 Javascript:

['hours', 'minutes', 'seconds'].forEach(function (elemId) {
    document.getElementById(elemId).setAttribute('disabled', true);
});

应该也能很好地工作。这与您所能得到的最接近“一次全部”的结果相同。