Question

我把谷歌用谷歌搜索过去并发现了许多“答案”，但它们都不会对我有用，所以也许你聪明的人能给我一个“明确的”答案？

我有一个Javascript函数：

function enableSaveLink() {
    document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}

这很好用，但很明显它是硬编码的，可以在我的页面上启用特定控件。我想要的是能够从页面上的任何控件调用此函数，传递我想要作为变量启用的控件的名称。所以，在一个理想的世界里，我的Javascript函数看起来像这样：

function enableControl(ctl) {
    document.getElementById(ctl).removeAttribute('disabled');
}

我会这样称呼它：

<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />

我知道我通过控制名称的方式永远不会起作用，但我尝试以各种方式传递它并且都不起作用，所以这只是为了说明的目的。任何人都可以告诉我如何实际完成这项工作吗？

Answer 1

您需要使用控件的ClientID属性。

这会有所帮助：

<asp:button id="btnTest" runat="server" Text="Click Me" 
            onclientclick="enableControl('<%= lblTest.ClientID %>') />

Answer 2

使用this引用（more info here）：

<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />

然后在你的剧本中：

function enableSaveLink(elem) {
    elem.removeAttribute('disabled');
}

在这里，您将对函数调用的对象的引用传递给函数，然后您可以在元素上设置属性，而不是在DOM中找到它。

编辑 - 刚刚意识到您的用途是什么。如果您希望在单击时从禁用的元素触发事件，则无法从该元素执行此操作。它需要从其他一些启用的元素处理。如果您打算在单击时禁用该元素，则上述方法可以正常工作 - 但在单击时不启用该元素。

编辑 - 只是为了配合我的评论，如果你有这样的统一结构（即所有输入都有相应的标签 - 甚至按钮），那么：

<div>
    <label onclick="activateSibling(this);">Input One:</label>
    <input type="text" />
</div>

你可以试试这个：

function activateSibling(label) {
    label.nextSibling.removeAttribute("disabled");
}

我在jQuery中用jsFiddle演示了我的概念，似乎工作得很好。

编辑 - 好的，最后的想法。那么custom attributes呢。您可以在可点击元素中添加target属性，其中包含您要启用的ID，如下所示：

<label target="active_me" onclick="activate(this);">Click to activate</label>

<input type="text" id="active_me" disabled="disabled" />

你的剧本：

function activate(label) {
    var inputId = this.getAttribute("target");
    var input = document.getElementById(inputId);
    input.removeAttribute("disabled");
}

尽管如此，我们开始感觉我们正在与这项技术作斗争，我们与ctrlInput.ClientID的距离并不太远。但是我想这会让你的标记变得更清晰，并且为你提供了一个可绑定的功能。

Answer 3

好的，我已经破解了。可能有多种方法可以做到这一点，但这是相当优雅的。

我的Javascript功能：

    function enableControl(ctl) {
        document.getElementById(ctl).removeAttribute('disabled');
    }

我的ASP.NET标记：

<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />

密钥是ClientIDMode属性，当设置为static时，表示控件在呈现时的客户端ID将与您在标记中提供的ID相匹配。如果它在命名容器中，您可能需要将其包含在函数调用中传递的变量中。有关ClientIDMode的详细信息，请参阅here。

无论如何，这对我有用！感谢大家的投入。

Answer 4

ClientID 用于在javascript上获取服务器端控件。

var element=document.getElementById('<%=lblTest.ClientID%>');

如何将ASP.NET控件名称传递给Javascript函数？

4 个答案: