Disable all buttons whose ID starts with
I have a form with a table on it. The table lists several rows, each with a New button. The table itself uses a loop for
and appends the row value to the end of the button id as shown below.
<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>
My complete code for the table
<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>
What I want is for the page state to change for all New buttons to be disabled in the table.
I tried the following, but it only disables the first button and not the rest
document.querySelector('[id^="create_"]').disabled = true;
+3
source to share
1 answer
document.querySelector
only returns the first matched item. You need to instead use document.querySelectorAll
and then loop through the resulting NodeList instead:
var elems = document.querySelectorAll('[id^="create_"]');
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
+3
source to share