logo标签列表

禁用所有ID属性以特定字符串开头的按钮

javascript
3

我有一个带表格的表单。该表格列出了多行，每一行都有一个“创建”按钮。表格本身使用for循环，并将行的值附加到按钮ID的末尾，如下所示：

<button type="button" class="btn btn-default" id="create_<%: stck.Stock%>" onclick="SetupDisinvestmentsFields(this,'<%=stck.SEDOL%>','<%=stck.Quantity%>','<%=stck.value%>')">
     <span class="glyphicon glyphicon-plus"></span> Create
</button>

我的表格完整代码如下：

<table class="table table-striped">
    <tr>
        <th>Stock</th>
        <th>SEDOL</th>
        <th>Quantity</th>
        <th>Value</th>
        <th>Actions</th>
    </tr>
     <%
        foreach (var stck in stocks)
        { %>
            <tr>
                <td><%: stck.Stock%></td>
                <td><%: stck.SEDOL%></td>
                <td><%: stck.Quantity%></td>
                <td><%: String.Format("{0:c}", stck.value)%></td>
                <td>
                    <button type="button" class="btn btn-default" id="create_<%: stck.Stock%>" onclick="SetupDisinvestmentsFields(this,'<%=stck.SEDOL%>','<%=stck.Quantity%>','<%=stck.value%>')">
                        <span class="glyphicon glyphicon-plus"></span> Create
                    </button>
                </td>
            </tr>
        <% }
    %>
</table>

我希望的是，当页面状态改变时，表格中所有的“创建”按钮都被禁用。
我尝试了以下方法，但它只禁用了第一个按钮而不是其余的按钮。
document.querySelector('[id^="create_"]').disabled = true;
使用 querySelectorAll 和 for 循环（请注意，querySelectorAll 返回一个 nodeList，您需要使用 .item(i) 来检索位置为 i 的项）。纯 JS 不是 jQuery，因此您必须将其应用于每个元素，而不能将其应用于一组元素。 - somethinghere
1个回答
4

document.querySelector 只返回第一个匹配的元素。您需要使用 document.querySelectorAll，然后循环遍历结果的 NodeList：

var elems = document.querySelectorAll('[id^="create_"]');

for (var i = 0; i < elems.length; i++) {
    elems[i].disabled = true;
}
对于querySelectorAll，建议使用elems.item(i)来检索实际项，因为它是一个非实时的NodeList（https://developer.mozilla.org/en-US/docs/Web/API/NodeList）。 - somethinghere
据我所知，item()方法仅建议用于避免i指向越界索引。在这种情况下，我认为这并不重要，因为我们已经预先确定了NodeList的长度。编辑：实际上，这几乎正是您链接的页面所说的：“可以用作简单访问nodeList [idx]（当idx越界时返回undefined）的替代方法”。 - James Donnelly
嗯，我会偏向于安全方面，但没问题。只是提一下。 - somethinghere
仅为完整起见，因为问题明确提到它：document.querySelectorAll('button[id^="create_"]') - JavaScript
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接