Question

我尝试了本主题中的所有方法来阻止选中的复选框的数量，但无济于事，它不适用于JQM的形式。我还更改了解决方案，尝试使用name和onclick on element

它没有检测到任何反应

Answer 1

我刚刚试过，它的工作原理是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动态注入复选框，因此，应使用事件委托来确定更改事件：

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

限制数量复选框已选中JQM

1 个答案: