jquery - How do I make a button inactive until requirements are met -

i trying make button have set remain inactive until requirement met, after use button becomes inactive. in code, have money counter count 1 every time click piece of coal on screen. want button inactive until reach amount of money, when it's active want able replace coal ore. finally, when purchase new ore want button become inactive again until earn enough money buy next upgrade. don't know if can use same button multiple purchases want i'm learning use them thoroughly possible!

important code:

<ul id="one"><strong id="clicks">$<span id="money">0</span></strong></ul> <!-- amount of money earned -->  <button type="button" id="upgrade">upgrade gem</button> <!-- button upgrade gem -->  <script> /* when coal.png clicked, 1 unit added money counter */ $(function() { $('#coal').click(function() {     moneycalc(); });  function moneycalc() {     var money = parseint($("#money").text());     money = isnan(money) ? 0: ++money;      $("#money").text(money); }  function resetcounter() {     $("#money").text(0);     } }); </script> 

thanks ahead of time if can me out!

add disabled attribute it. code like:

$(function() {    $("#some_text").on("keyup", function() {    if($("#some_text").val() == "foo") {      $("#upgrade").prop("disabled", false);      } else {        $("#upgrade").prop("disabled", true);        }      });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" id="some_text"/>  <button type="button" id="upgrade" disabled>upgrade gem</button>