确定按下按钮时将运行哪些代码 - 限制复选框答案

【问题标题】：Determine which code will run when a button is pressed - limit checkbox确定按下按钮时将运行哪些代码 - 限制复选框
【发布时间】：2020-07-20 00:54:36
【问题描述】：

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

第一个 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 代码来限制可以根据单击的按钮选择多少个复选框。

【问题讨论】：

我们需要您向我们展示您的尝试
我的 jsfiddle 上有一个 javascript 代码。但它要求每个复选框都有不同的名称，我正在寻找其他解决方案。
function KeepCount() { var NewCount = 0 if (document.selecao.myTextEditBox.checked) {NewCount = NewCount + 1} if (NewCount == 7) { alert('Você já escolheu seis dezenas "') document.selecao; 返回 false; } }

标签： javascript html css dom checkbox

【解决方案1】：

使用 jQuery 非常简单。我创建了一个简单的虚拟化示例：

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/

【讨论】：

我还要注意，如果用户更改限制，您需要在 UI 中进行处理。例如，如果他们的复选框数量超过了新限制所允许的数量。我没有包括它，因为它不是 OP 的一部分。
你能告诉我更多关于如何处理 UI 的细节吗？
解决这个问题的方法很多。如果选择的限制小于当前选中的框总数，可能最简单的方法是提示用户重置所有检查。