限制在GridView表中檢查的複選框

Question

我想向用戶顯示一個比較按鈕來比較asp.net中的選定行。這是我到目前爲止所嘗試的。

$(function() { 
    $("#myTable").find("input:checkbox").click(function() { 
     var bol = $("#myTable").find("input:checkbox:checked"); 
     alert(bol.length); 
     if (bol.length <= 3) { 
      $('#hello').fadeIn(); 
     } else if (bol.length > 1) { 
      alert('hi'); 
      $('#error').hide(); 
     } else if (bol.length >= 4) { 
      $("#myTable").find("input:checkbox").not(":checked").attr("disabled", bol); 
     } else { 
      $('#hello').hide(); 
     } 
    }); 
    $('#compare').click(function() { 
     var ck = $("#myTable").find("input:checkbox:checked"); 
     if (ck.length === 1) { 
      $('#error').show(); 
     } else if (ck.length > 1) { 
      $('#error').hide(); 
     } 
    }); 
}); 

現在，我想隱藏#error ID，如果用戶選中多個複選框這是不是現在發生的事情。

Fiddle

我這個也試過，但它不是使複選框，如果我們選擇的4個複選框，然後選中任意一個。

$(function() { 
    $("#myTable").find("input:checkbox").click(function() { 
     var bol = $("#myTable").find("input:checkbox:checked"); 
     if (bol.length <= 3) { 
      $('#error').hide(); 
      $('#hello').fadeIn(); 
     } else if (bol.length >= 4) { 
      $("#myTable").find("input:checkbox") 
       .not(":checked").attr("disabled", bol); 
     } else { 
      $('#hello').hide(); 
     } 
    }); 
    $('#compare').click(function() { 
     var ck = $("#myTable").find("input:checkbox:checked"); 
     if (ck.length === 1) { 
      $('#error').show(); 
     } 
    }); 
}); 

Fiddle

Answer 1

我能解決這個問題。這裏是解決方案。回答我的問題，因爲這可能對某人有幫助。

$(function() { 
    // Just pass the gridview id or class name where it has checkbox in header as well as in each row. Also, define num to restrict maximum number of checkboxes, that needed to be checked. 
    var grd = $('.mGrid'); 
    var num = 4; 
    var count = 0; 
    var headChk = grd.find('th>input:checkbox'); 
    var checks = grd.find('td>input:checkbox'); 
    $(headChk).change(function() { 
     if ($(headChk).is(':checked')) { 
      for (i = 0; i < num; i++) { 
       $(checks[i]).prop("checked", true); 
      } 
     } else { 
      $(checks).prop("checked", false); 
     } 
    }); 
    // to check or uncheck top selector 
    $(checks).change(function() { 
     var bol = grd.find("td>input:checkbox:checked"); 
     var b = grd.find("td>input:checkbox"); 
     var a = bol.length; 
     var c = (b.length); 
     if (a > num) { 
      alert("Can't select more than " + num + " items"); 
      $(this).prop("checked", false); 
     } else if (a == num) { 
      $(headChk).prop("checked", true); 
     } else { 
      $(headChk).prop("checked", false); 
     } 
    }); 
}); 

Fiddle