Question

我正在尝试获取'button1'的父div并启用该div中的所有输入（我目前已将它们禁用'

<div id="wrapper">
<div id="gameInfo">
<asp:TextBox ID="gameTitle"/>
<asp:TextBox ID="gameType" />
<asp:TextBox ID="gameprice"/>
<input type="button" id="button1" value="enable" onClick="myFunc()"/>
</div>

的javascript：

function myFunc() {
            setTimeout(function () {
                var inputs = document.getElementById("button1").parentNode.querySelectorAll('input[type="text"]');
                [].forEach.call(inputs, function (input) {
                    input.disabled = false;
                });
            });
        }

我正在尝试获取button1的父节点，然后我不确定这样做的正确方法但是我希望按钮的父div中的所有输入都启用但只有父div的我点击的按钮。有什么建议吗？

Answer 1

你只是没有正确调用myFunc - 你需要括号来实际调用它：

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

function myFunc() {
  setTimeout(function() {
    var inputs = document.getElementById("button1").parentNode.querySelectorAll('input[type="text"]');
    [].forEach.call(inputs, function(input) {
      input.disabled = false;
    });
  });
}

<input type="text" disabled="disabled" value="another box" />
<div id="wrapper">
  <input type="text" disabled="disabled" value="ignore me" />
  <div id="gameInfo">
    <input type="text" ID="gameTitle" disabled="disabled" />
    <input type="text" ID="gameType" disabled="disabled" />
    <input type="text" ID="gameprice" disabled="disabled" />
    <input type="button" id="button1" value="enable" onClick="myFunc()" />
  </div>
</div>

Answer 2

如果您使用jquery进行DOM遍历，则可以执行以下操作：

 $('#<%= button1.ClientID %>').on('click', function() {
      $(this).parent().find('input[type=text]').removeAttr('disabled');
 });

Answer 3

你没有以正确的方式调用函数，你应该使用大括号：

onClick="myFunc()"

Answer 4

我做的有点不同（没有setTimeout）：

function myFunc(elm){
   for( var inputs = elm.parentNode.querySelectorAll('input[type="text"]')
      ,          L = inputs.length
      ; L--
      ; inputs[L].disabled = false  //enable inputs
      ); //end loop
}

<div id="wrapper">
  <div id="gameInfo">
    <input type="text" ID="gameTitle" disabled="disabled" />
    <input type="text" ID="gameType" disabled="disabled" />
    <input type="text" ID="gameprice" disabled="disabled" />
    <input type="button" id="button1" value="enable" onclick="myFunc(this)" />
  </div>
</div>

替代不支持querySelectorAll的浏览器（并且可选地支持disabled）：

function myFunc(elm){
   for( var inputs = elm.parentNode.getElementsByTagName('input')
      ,          L = inputs.length
      ; L--
      ; inputs[L].type.toLowerCase()==='text' && (inputs[L].disabled = false)
      ); //end loop
}

<div id="wrapper">
  <div id="gameInfo">
    <input type="text" ID="gameTitle" disabled="disabled" />
    <input type="text" ID="gameType" disabled="disabled" />
    <input type="text" ID="gameprice" disabled="disabled" />
    <input type="button" id="button1" value="enable" onclick="myFunc(this)" />
  </div>
</div>

上述两个功能的想法是将单击的元素（按钮）传递给函数：onclick="myFunc(this)"。
这也适用于多个div（'行'）而无需对id进行硬编码。

这应该可以帮到你！

获取按钮的父div

4 个答案: