如何使用 JS 禁用多个输入？

3回答

交互式爱情

document.querySelector仅选择您搜索的第一个实例，您需要使用它document.querySelectorAll('input')来选择输入的所有实例，它返回一个您可以遍历的数组，var inputs = document.querySelectorAll('.input')for (let i = 0;i<inputs.length;i++) {  inputs[i].disabled = true}或者使用 ForEachvar inputs = document.querySelectorAll('.input')inputs.forEach((input)=>{  input.disabled = true})

摇曳的蔷薇

尝试查询选择器全部运行下面的代码片段：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>

波斯汪

如果您将输入包装在<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>