Pfthb

We have an API generated array of records with buttons.

<td id=place-bets-1><button class="btn btn-primary my-2 my-sm-0" id="pick-team-5">Select</button></td>

Currently we have a static string of jquery calls to disable the jquery buttons pressed, and would like to reduce the ugliness of repetitive code using array lookups.

$("#pick-team-1").click(function () 
 $("#pick-team-1").attr("disabled", true);
);

$("#pick-team-2").click(function () 
 $("#pick-team-2").attr("disabled", true);
);

$("#pick-team-3").click(function () 
 $("#pick-team-3").attr("disabled", true);
);

$("#pick-team-4").click(function () 
 $("#pick-team-4").attr("disabled", true);
);

$("#pick-team-5").click(function () 
 $("#pick-team-5").attr("disabled", true);
);

I thought to maybe index my buttons and launch an .onclick scan of an array of buttons pressed and disabling each one clicked.

i.e.

for (var i = 0; i < buttonspressed; i++) 
 if (buttonspressed = 3) 
 maxoptionsselected();
 else 
 pleaseselectmore();
 

If all your buttons have the 'btn' class, then you can do:

$(".btn").click(function () 
 $(this).attr("disabled", true);
);

That should bind to all the buttons and disable the one clicked.

Below is one approach. You could use a class on the buttons to make the selector more specific if it isn't all buttons on the page. Updating the span just shows one way of querying the number of buttons selected. I'm not suggesting that you would have that in your click handler.

var mySpan = $("#numSelected");
$("button").click(function () 
 $(this).attr("disabled", true);
 mySpan.html($("button[disabled]").length);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><button class="btn btn-primary my-2 my-sm-0" id="pick-team-4">Select</button></td>
<td id=place-bets-1><button class="btn btn-primary my-2 my-sm-0" id="pick-team-5">Select</button></td>
</tr>
</table>
<span id="numSelected">0</span> selected