How do I make a button inactive until requirements are met

Question

I am trying to make a button I have set up remain inactive until a requirement is met, then after I use the button it becomes inactive. So in my code, I have a money counter that will count up by one every time I click a piece of coal on the screen. I want my button to be inactive until I reach a certain amount of money, then when it's active I want it to be able to do something like replace the coal with another ore. Finally, when I purchase the new ore I want the button to become inactive again until I earn enough money to buy the next upgrade. I don't know if you can use the same button for multiple purchases like I want but I'm just learning to use them thoroughly so it could be 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 to upgrade gem -->

<script> /* When coal.png is clicked, one unit is added to the 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 you can help me out!

[related question](http://stackoverflow.com/questions/15122526/disable-button-in-jquery/) — Blazemonger, Sep 19 '14 at 20:13

score 2 · Answer 1 · answered Sep 19 '14 at 20:13

Add disabled attribute to it. So the code would be something 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>

score 1 · Answer 2 · answered Sep 19 '14 at 20:17

hmm perhaps you could use some css magic to show and hide the button along with J Query. I use this to create a responsive menubar. The logic would need to be tweaked but I would imagine that this may be a step in the right direction.

<!--jquery function for toggle menu-->
    <script>
        $("#show-nav").click(function() {
            $(".main-nav").toggle("slow");
            $("#close-nav").show("slow");
        });

        $("#close-nav").click(function() {
            $(".main-nav").toggle("slow");
            $("#close-nav").hide("slow");
        });
    </script>

score 0 · Answer 3 · answered Sep 19 '14 at 20:13

If you really want to control access to the event handling (opposed to some css tricks) instead of binding the click event on load, just bind it on successful test of moneyCalc() then unbind on reset.

$(function() {
  $('#coal').click(function() {
    moneyCalc();
  });

  function moneyCalc() {
    var money = parseInt($("#Money").text());
    money = isNaN(money) ? 0: ++money;

    if(money > _some_value_)
    {
      $("#ore").click(function(e){
          _some_operation_();
      });
    }

    $("#Money").text(money);
  }

  function resetCounter() {
    $("#Money").text(0);
    $("#ore").unbind("click");
  }
});

How do I make a button inactive until requirements are met

3 Answers3