javascript - 我想修改下面的代码以选择最多 3 个复选框

Question

我创建了多个复选框，但我想选择最多 3 个复选框。早些时候我使用下面的代码只选择一个复选框，当我编辑复选框时，它会返回之前选择的复选框。我希望它按原样发生，但一个更正是....它应该选择最多 3 个复选框。谁能按照我的要求给我一个代码。

1.code

<div class = "form-group">
                            
    <label> Employee Skills </label>    <br>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value="Java" />Java <br>
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value="Python" />Python <br>
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value=".Net" />.Net <br>
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value="Kotlin" />Kotlin <br>
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value="C" />C <br>
    <input class="selectupto3" type="checkbox"  th:field = "*{skill}" name = "skill" value="Ruby" />Ruby <br>
    
    <script type="text/javascript">
    $('.selectupto3').on('change', function() {
        $('.selectupto3').not(this).prop('checked', false);
    });
    </script>
    
    <span th:if="${#fields.hasErrors('skill')}" th:errors="*{skill}">skill error</span>
</div>

2.I want to modify this below code for selecting up to 3 checkboxes and also when i update these checkboxes it should return with previous selected checkboxes.

<script type="text/javascript">
    $('.selectupto3').on('change', function() {
        $('.selectupto3').not(this).prop('checked', false);
    });
</script>

标签： javascripthtmljavaquery