我试过这个 <body> <input placeholder="test1" class="input"/> <input placeholder="test2" class="input"/> </body> <script> document.querySelector(".input").disabled = true; </script>为什么第二个输入（test2）没有被禁用。谢谢！
3 回答
交互式爱情
TA贡献1712条经验 获得超3个赞
document.querySelector仅选择您搜索的第一个实例，您需要使用它document.querySelectorAll('input')来选择输入的所有实例，它返回一个您可以遍历的数组，
var inputs = document.querySelectorAll('.input')
for (let i = 0;i<inputs.length;i++) {
inputs[i].disabled = true
}
或者使用 ForEach
var inputs = document.querySelectorAll('.input')
inputs.forEach((input)=>{
input.disabled = true
})
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
尝试查询选择器全部
运行下面的代码片段：
var allinputs = document.querySelectorAll('.input');
for (var i = 0, len = allinputs.length; i<len; i++){
allinputs[i].disabled = true;
}
<input class="input"></input>
<input class="input"></input>
波斯汪
TA贡献1811条经验 获得超4个赞
如果您将输入包装在<fieldset> ... </fieldset>标签中并在其上设置禁用属性<fieldset disabled>- 所有子输入都将被禁用。
input:disabled {
cursor: not-allowed;
}
<fieldset disabled>
<legend>Fieldset disabled - causes all children inputs to be disabled:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
<hr/>
<fieldset>
<legend>Fieldset not disabled:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
添加回答
举报
0/150
提交
取消