Javascript 禁用和启用文本框的最佳方法

我正在编写一个简单的html代码，可以在单击按钮时启用和禁用一些文本框。下面是我的代码

函数myFunction1（）{
document.querySelector（'#myText0'）.disabled=true；
document.querySelector（'#myText1'）.disabled=true；
document.querySelector（'#myText2'）.disabled=false；
document.querySelector（'#myText3'）.disabled=false；
document.querySelector（“#myText4”）.disabled=false；
}
函数myFunction2（）{
document.querySelector（“#myText0”）.disabled=false；
document.querySelector（'#myText1'）.disabled=false；
document.querySelector（'#myText2'）.disabled=true；
document.querySelector（'#myText3'）.disabled=true；
document.querySelector（'#myText4'）.disabled=true；
}
函数myFunction3（）{
document.querySelectorAll（“输入”）.disabled=true；
document.querySelector（'#myText2'）.disabled=false；
document.querySelector（'#myText3'）.disabled=false；
document.querySelector（“#myText4”）.disabled=false；
}
函数myFunction4（）{
document.querySelector（“输入”）.disabled=true；
document.querySelector（“#myText0”）.disabled=false；
document.querySelector（'#myText1'）.disabled=false；
}

输入{
显示：块；
保证金：0.85em
}

手动启用文本框
禁用0,1字段
禁用0,1以外的Rest字段


首先禁用所有文本框，然后启用所需的文本框
禁用0,1字段
禁用0,1以外的Rest字段

您可以使用简单的通用方法为您“级联”逻辑，而不是重复定义每个操作。看看附带的小提琴（及其代码片段）

函数myFunc1（）{
enablell（）；
禁用文本框（“#myText0”）；
禁用文本框（“#myText1”）；
}
函数myFunc2（）{
disableAll（）；
enableTextbox（“#myText0”）；
enableTextbox（“#myText1”）；
}
/*共同功能*/
函数disableAll（）{
禁用文本框（“#myText0”）；
禁用文本框（“#myText1”）；
禁用文本框（“#myText2”）；
禁用文本框（“#myText3”）；
禁用文本框（“#myText4”）；
}
函数enablell（）{
enableTextbox（“#myText0”）；
enableTextbox（“#myText1”）；
enableTextbox（“#myText2”）；
启用文本框（“#myText3”）；
enableTextbox（“#myText4”）；
}
函数disableTextbox（textboxName）{
document.querySelector（textboxName）.disabled=true；
}
功能启用TextBox（textboxName）{
document.querySelector（textboxName）.disabled=false；
}
/*常用功能*/

输入{
显示：块；
保证金：0.85em
}

正确的方法
禁用0,1字段
对于每个“输入类型”或“类”，禁用除0,1之外的Rest字段：


函数myFunction1（）{
//var inputs=document.querySelectorAll（'input[type=text]'）；//使用此选项或下面的选项
var inputs=document.querySelectorAll（'input[class=ttt]'）；
对于（变量i=0；i

输入{
显示：块；
保证金：0.85em
}

手动启用文本框
启用所有字段
禁用所有字段
我认为最好的方法是在类或甚至数据属性中指定禁用的原因。为了简单起见，让我们使用一个类。因此，例如，输入应该被禁用，因为您给它一个类（或数据属性），该类的值为该原因的名称。这将使您的代码非常可读，甚至，而无需阅读javascript文件。您根本不会编写太多javascript

这将使您的元素一起启用，一起启用，反之亦然

我建议这样做：


功能禁用（类名）{
for（document.getElementsByClassName（className）的常量元素）{
element.disabled=true；
}
}
函数启用（类名）{
for（document.getElementsByClassName（className）的常量元素）{
element.disabled=false；
}
}
输入{
显示：块；
保证金：0.85em
}

手动启用文本框
禁用0,1字段
禁用0,1以外的Rest字段


首先禁用所有文本框，然后启用所需的文本框
禁用0,1字段
禁用0,1以外的Rest字段
您可以使用以下方法缩短它（让el of document.querySelectorAll（'input.ttt'））el.disabled=true；你当然是对的@John，谢谢：）