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

Question

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

<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 的 children 访问吗？或者两者都不是？任何建议将不胜感激...谢谢。

Answer 1

如果您使用 jQuery:

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

它为 #inputFields 的每个 input 设置属性。

另一个选项：

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

或者如果使用纯 Javascript:

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

应该也不错。这是您可以获得的最接近 "all of them at once" 的值。

Answer 2

这是一种遍历它们的方法，你可以用它们做任何你想做的事情。

$('#inputFields').children('input').each(function () {
    alert(this.value);
});

例如

$(this).prop('disabled', true);

Answer 3

与其将 input 元素打包到 div 中，不如将它们正确地制作成 form 元素的 child 元素。

这样做的好处是，HTML 中已经有 form 个元素的集合，您可以使用 document.forms[ ] 或仅在 JavaScript 中轻松访问这些元素forms[ ] 和他们的 children 与 forms[ ].elements[ ].

表单及其子项可以通过索引或 name 属性来调用，例如

 var firstInput = forms['myInputForm'].elements[0];

例如，这样您就可以遍历此选择并执行您想要的任何更改。

编辑

考虑到你的 input 元素确实有一个 name 属性，你可以这样写

['hours', 'min', 'seconds'].forEach(function (name) {

  document.forms['inputFields'].elements[name].setAttribute('disabled', true);

});

在您的脚本中，<form name="inputFields"> 而不是您在 HTML 中的 div。

对于包含 input 元素，form 元素比 div 元素更适合，而且，如前所述，您不必搜索整个 DOM 用于您的 input 元素，因为已经有一个 HTML 集合，您可以使用上述方式使用 JavaScript 访问该集合。

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

how to setAttribute(s) for multiple tags at once

javascript

input

setattribute