美文网首页
jQuery iCheck 限制选中checkbox数量

jQuery iCheck 限制选中checkbox数量

作者: Fairyin | 来源:发表于2018-08-03 23:46 被阅读55次
  • 思路1:阻止jquery默认事件,尝试多次无果
  • 思路2:达到限制数量时禁用其它checkbox,变相达到限制4个选择的作用
$('.ck_tags input').on('ifChecked', function(event){
    var length = $('.ck_tags input:checked').length;
    if (length > 3) {
        $(".ck_tags input").not("input:checked").each(function(){
            $(this).iCheck('disable');
        });
    }
});

$('.ck_tags input').on('ifUnchecked', function(event){
    var length = $('.ck_tags input:checked').length;
    if (length < 4) {
        $(".ck_tags input:disabled").each(function(e){
            $(this).iCheck('enable');
        });
    }
});
  • 折腾了近2个小时,思路1的解决方案可以满足业务需求(但无奈尝试无果),思路2 的实现方式则对用户体验更好;避免了弹窗的提示;
  • 换个角度思考带来不一样的效果,深有体会。

相关文章

网友评论

      本文标题:jQuery iCheck 限制选中checkbox数量

      本文链接:https://www.haomeiwen.com/subject/sikpvftx.html