如何让一个按钮没有改变，直到要求得到满足

Question

我试图让一个按钮，我已经建立了保持无效，直到要求得到满足，我用它变为无效按钮，然后后。所以，在我的代码，我有点钞机，将计数通过每次一个我点击屏幕上的一块煤。我想，直到我达到一定数额的钱我的按钮是无效的，那么当它是积极的，我希望它能够做到像与其他矿石代替煤。最后，当我购买新矿我想，直到我挣足够的钱去买下一个升级按钮再次变为无效。我不知道你是否可以像我想要的那样使用同一个按钮进行多次购买，但我只是学习彻底地使用它们，所以它可能是可能的！

重要的代码：

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

由于时间提前，如果你能帮助我！

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

Answer 2

如果你真的想控制访问事件处理（相对一些CSS技巧），而不是结合负载的单击事件，只要绑定它成功的测试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"); 
    } 
}); 

Answer 3

嗯也许你可以使用一些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>