在满足要求之前，如何使按钮处于非活动状态答案

【问题标题】：How do I make a button inactive until requirements are met在满足要求之前，如何使按钮处于非活动状态
【发布时间】：2014-09-19 20:06:19
【问题描述】：

我正在尝试使我设置的按钮保持非活动状态，直到满足要求，然后在我使用该按钮后它变为非活动状态。所以在我的代码中，我有一个点钞机，每当我在屏幕上点击一块煤时，它就会加一。我希望我的按钮在达到一定金额之前处于非活动状态，然后当它处于活动状态时，我希望它能够做一些事情，比如用另一种矿石代替煤炭。最后，当我购买新矿石时，我希望按钮再次变为非活动状态，直到我赚到足够的钱购买下一次升级。我不知道您是否可以像我想要的那样使用同一个按钮进行多次购买，但我只是在学习彻底使用它们，这样才有可能！

重要代码：

<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>

如果您能帮助我，请提前感谢！

【问题讨论】：

related question

标签： jquery html button

【解决方案1】：

为其添加disabled 属性。所以代码会是这样的：

$(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>

【讨论】：

【解决方案2】：

嗯，也许您可以使用一些 css 魔术来显示和隐藏按钮以及 J Query。我用它来创建一个响应式菜单栏。逻辑需要调整，但我想这可能是朝着正确方向迈出的一步。

<!--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>

【讨论】：

【解决方案3】：

如果您真的想控制对事件处理的访问（与某些 css 技巧相反）而不是在加载时绑定 click 事件，只需在成功测试 moneyCalc() 时绑定它，然后在重置时取消绑定。

$(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");
  }
});

【讨论】：