Số lượng hộp kiểm giới hạn

Question

Tôi có 20 Hộp kiểm. Tôi cần vô hiệu hóa 16 Hộp kiểm, nếu 4 hộp kiểm được chọn.

Tôi tryed này begann với mã jquery này

$("input[type=checkbox][name=cate]:checked").each(

    function() 
    { 
    } 

); 

gì tôi cần là nếu người dùng chọn 4 hộp kiểm sau đó tất cả các hộp kiểm khác nên bị vô hiệu.

Answer 1

$("input[type=checkbox][name=cate]").click(function() { 

    var bol = $("input[type=checkbox][name=cate]:checked").length >= 4;  
    $("input[type=checkbox][name=cate]").not(":checked").attr("disabled",bol); 

}); 

demo

Answer 2

Dưới đây là một ví dụ làm việc. Có thể nó sẽ có ích cho một số người ;-)

$.fn.limit = function(n) { 
var self = this; 
this.click(function(){ 
    (self.filter(":checked").length==n)? 
    self.not(":checked").attr("disabled",true).addClass("alt"): 
    self.not(":checked").attr("disabled",false).removeClass("alt"); 
}); 
} 

$("input:checkbox").limit(3); 

} 

Answer 3

này không DISABLE các hộp kiểm bên còn lại, nhưng ngăn chặn từ việc lựa chọn hơn. Tôi sẽ chia sẻ dù sao, ở đây là:

.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" /> 

.js

$(document).ready(function() { 
    LimitCheckboxes('input[name*=chkList]', 3); 
} 



function LimitCheckboxes(control, max) { 

    $(control).live('click', function() { 

     //Count the Total Selection in CheckBoxList 
     var totCount = 1; 
     $(this).siblings().each(function() { 
      if ($(this).attr("checked")) { totCount++; } 
     }); 

     //if number of selected item is greater than the max, dont select. 
     if (totCount > max) { return false; } 
     return true; 
    }); 

} 

PS: Hãy chắc chắn rằng bạn sử dụng RepeatLayout = "Flow" để thoát khỏi bảng gây phiền nhiễu định dạng.

Answer 4

Cung cấp phần tử cha có id là limit_checkbox sẽ giúp tăng tốc độ lựa chọn, lưu vào bộ nhớ cache truy vấn sẽ giảm lượng tương tác DOM chậm.

Đã sử dụng "thay đổi" thay vì nhấp chuột nếu không mã có thể bị phá vỡ bằng cách sử dụng bàn phím, cũng sử dụng trực tiếp thay vì liên kết nhanh hơn rất nhiều.

// Cache jQuery selection 
var $checkboxes_to_limit = $("#limit_checkbox").find("input:checkbox[name=cate]"); 
$checkboxes_to_limit.live("change", function() { 
    if($checkboxes_to_limit.filter(":checked").length >= 4) { 
     $checkboxes_to_limit.not(":checked").attr("disabled","disabled"); 
    } 
    else { 
     $checkboxes_to_limit.removeAttr("disabled"); 
    } 
}); 

Answer 5

Tôi đã tìm thấy giải pháp linh hoạt hơn cho phép bạn thay đổi giới hạn cho các nhóm hộp kiểm khác nhau.

// Assign a class of limit_checkbox to the containing DIV and 
// set a data-limit attribute with your limit. 
$(".limit_checkbox").on("change", function() 
{ 
    var limit = $(this).attr('data-limit'), 
     checkboxes = $(this).find("input:checkbox"), 
     valid = checkboxes.filter(":checked").length >= limit; 

    checkboxes.not(":checked").attr("disabled", valid); 
}); 

Vấn đề duy nhất tôi thấy được rằng nếu xác nhận của bạn bị lỗi và trả về trang với đầu vào nó sẽ cho phép người dùng chọn một hộp thêm trước khi vô hiệu hóa phần còn lại. Cách tôi giải quyết điều này là để đếm có bao nhiêu đã được kiểm tra và vô hiệu hóa phần còn lại trên máy chủ trước khi gửi trang với đầu vào trở lại.

hy vọng nó sẽ giúp Cheers!

Answer 6

Giải pháp của tôi:

// Function to check and disable checkbox 
    function limit_checked(element, size) { 
     var bol = $(element + ':checked').length >= size; 
     $(element).not(':checked').attr('disabled',bol); 
    } 

    // List of checkbox groups to check + number of checked alowed 
    var check_elements = [ 
     { id: '.group1 input[type=checkbox]', size: 2 }, 
     { id: '.group2 input[type=checkbox]', size: 3 }, 
    ]; 

    // Run function for each group in list 
    $(check_elements).each(function(index, element) { 
     // Limit checked on window load 
     $(window).load(function() { 
     limit_checked(element.id, element.size); 
     }) 

     // Limit checked on click 
     $(element.id).click(function() { 
     limit_checked(element.id, element.size); 
     }); 
    });