JQM选中了“限制数量”复选框

Limit number checkbox checked JQM

本文关键字：限制数量 复选框 JQM      更新时间：2023-09-26

我尝试了这个主题上的所有方法来阻止选中的复选框数量，但没有用，它不适用于JQM的形式。我还更改了解决方案，尝试使用名称和onclick元素

它没有检测到任何反应

解决方案Jquery

我刚刚尝试过，它与jQM一起工作。创建一组复选框：

<fieldset data-role="controlgroup" id="checkGroup">
    <legend>Vertical:</legend>
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
    <label for="checkbox-v-2a">One</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
    <label for="checkbox-v-2b">Two</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
    <label for="checkbox-v-2c">Three</label>
    <input type="checkbox" name="checkbox-v-2d" id="checkbox-v-2d">
    <label for="checkbox-v-2d">Four</label>
    <input type="checkbox" name="checkbox-v-2e" id="checkbox-v-2e">
    <label for="checkbox-v-2e">Five</label>
</fieldset>

然后处理更改事件。每次任何复选框更改状态时，计算当前选中的数量，如果超过允许的最大值，则取消选中刚刚更改的复选框：

$('#checkGroup input[type="checkbox"]').on("change", function(){
    var numChecked = $('#checkGroup input[type="checkbox"]:checked').length;
    if (numChecked > 3){
        $(this).prop("checked", "").checkboxradio("refresh");   
    }       
});

这是一个工作DEMO

更新：

OP正在动态注入复选框，因此，应使用事件委派来cath更改事件：

$(document).on("change", '#ch input[type="checkbox"]', function(){
    var numChecked = $('#ch input[type="checkbox"]:checked').length;       
    if (numChecked > 3){
        $(this).prop("checked", "").checkboxradio("refresh");   
    }       
});
相关文章：