按类型获取元素然后禁用

Question

我正在尝试将div中的所有元素都只包含在texbox中。我的div里面有asp文本框，还有按钮

<div id="wrapper">
  <div id="gameInfo">
    <asp:TextBox ID="gameTitle" runat="server" MaxLength="10" Width="150px"></asp:TextBox>
    <asp:TextBox ID="gameType" runat="server" MaxLength="10" Width="150px"></asp:TextBox>
    <asp:TextBox ID="gameprice" runat="server" MaxLength="10" Width="150px"></asp:TextBox>
    <input type="button" id="button1" value="enable" onClick="myFunc"/>
 </div>
</div>

的javascript：

<script type="text/javascript">

function myFunction() {
    document.getElementById("wrapper").querySelectorAll('input[type=text]').disable = true;
}

</script>

在这里，我试图获取wrapper中的所有元素，然后执行queryselectall以获取所有与文本相同的输入，但它似乎不起作用我必须做错了，我也想要这个一旦页面加载就会发生。

Answer 1

querySelectorAll返回匹配元素的节点列表;我的猜测是你必须遍历该数组并单独禁用每个元素：

var inputs = document.getElementById("wrapper").querySelectorAll('input[type="text"]');
[].forEach.call(inputs, function(input){
    input.disabled = true;
});

还要注意选择器查询中的双引号。 input[type=text] != input[type="text"]

Answer 2

Asp输出经典的texbox元素。所以如果你想获得值 循环遍历包装器div中的输入项并获取文本值，如：

for (x = 0; x < document.getElementById("wrapper").getElementsByTagName('input').length; x++) {    
    if (document.getElementById("wrapper").getElementsByTagName('input').item(x).type == 'text') {
        alert(document.getElementById("wrapper").getElementsByTagName('input').item(x).value);
    }
}

这里的游乐场：http://jsfiddle.net/gkthgud8/

Answer 3

首先，你有两个拼写错误：

• 您没有执行()您的onclick处理程序：

  <input type="button" id="button1" value="enable" onClick="myFunc"/>
  

  应该是：

  <input type="button" id="button1" value="enable" onClick="myFunc()"/>
  

• 你拼错了disabled：

  .querySelectorAll('input[type=text]').disable = true;
  

  应该是：

  .querySelectorAll('input[type=text]').disabled = true;
  

---

您问题中的问题标题和javascript代码指定您要在页面加载上的wrapper-div wrapper 中禁用所有类型文本的输入元素。

然后使用html代码中的按钮启用（根据它的值和follow-up question）特定div中的输入（如gameInfo）。

以下是一个示例，概述了如何使用一个启用/禁用功能（并且没有querySelectorAll 这两个（所以你不要这样做）在不支持它的旧版旧浏览器中出现错误），在这两种情况下，您仍然会循环遍历这些元素）：

＆＃13;

＆＃13;

function disableInp(elm, true_false){
  for( var inputs = elm.getElementsByTagName('input'), L = inputs.length
     ; L-- // loop ends when L reaches 0
     ; inputs[L].type.toLowerCase()==='text' && (inputs[L].disabled = true_false)
     ); //end loop
}

window.onload=function(){
  disableInp(document.getElementById('wrapper'), true);
};

＆＃13;

<div id="wrapper"> <!-- example html for live snippet -->
  <div class="gameInfo">
    <input type="text" maxLength="10" width="150px" />
    <input type="text" maxLength="10" width="150px" />
    <input type="text" maxLength="10" width="150px" />
    <input type="button" value="enable" 
        onclick="disableInp(this.parentNode, false)"/>
  </div>
  <div class="gameInfo"> <!-- extra row for example -->
    <input type="text" maxLength="10" width="150px" />
    <input type="text" maxLength="10" width="150px" />
    <input type="text" maxLength="10" width="150px" />
    <input type="button" value="enable" 
        onclick="disableInp(this.parentNode, false)"/>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想指出HTML中的id应该是唯一的。使用课程通常就足够了。

那应该让你开始吧！

Answer 4

document.querySelectorAll("#wrapper input").forEach((element) => { element.disabled = false; });