确定按下按钮时将运行的代码 - 限制复选框

Question

我有这个jsfiddle https://jsfiddle.net/elenderg/wzarrg06/63/

firts div上有10个按钮。

    <button class='btn btn-info custom' onclick="myFunction()">6 (R$ 2,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">7 (R$ 5,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">8 (R$ 10,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">9 (R$ 20,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">10 (R$ 50,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">11 (R$ 100,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">12 (R$ 250,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">13 (R$ 500,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">14 (R$ 1000,00)</button>
    <button class='btn btn-info custom' onclick="myFunction()">15 (R$ 2000,00)</button>

他们将确定用户可以在div＃2上选择多少个复选框（例如，如果用户点击“6”按钮，他只能点击6个复选框）

我需要一个js / jquery代码来限制可以根据单击的按钮选择多少个复选框。

Answer 1

使用jQuery非常直接。我创建了一个简单的dummied示例：

<强> HTML：

 <div class="limits">
    <input type="button" value="Three" data-value="3">
    <input type="button" value="Four" data-value="4">
    <input type="button" value="Five" data-value="5">
<div>

<div class="checks">
    <input type="checkbox" name=“check” id="check1" value="1" />
    <label for="check1">1</label>
    <input type="checkbox" name=“check” id="check2" value="2" />
    <label for="check2">2</label>
    <input type="checkbox" name=“check” id="check3" value="3" />
    <label for="check3">3</label>
    <input type="checkbox" name=“check” id="check4" value="4" />
    <label for="check4">4</label>
    <input type="checkbox" name=“check” id="check5" value="5" />
    <label for="check5">5</label>
</div>

<强> JS：

(function($){

    var currentLimit=3;

    $('div.limits > input[type=button]').on('click',function(){
      currentLimit = parseInt($(this).data('value'));
    });

    $('div.checks input').on('click', function(e){
        var totalChecked = $('input:checked').length;

        if (totalChecked > currentLimit){
            e.preventDefault();
        }
    });

})(jQuery)

这是一个工作小提琴：http://jsfiddle.net/jh5wtzaf/