使用JavaScript和jQuery取消選中復選框值

Question

我正在動態生成5個復選框。 我最多可以選擇3個復選框。 選中3個復選框后，如果我嘗試再選擇一個復選框，它將發出警報；一旦我在警報框中單擊確定，則應取消選中我選擇的第四個復選框。

我用於動態生成復選框的代碼

$("#catalog_table").append('<tr><td style="width:10%; background-color:#fcfbf6; font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33;text-align: center;"><a href="javascript:item();">'+productCatalog[i].productCode+'</a></td><td style="width:10%; background-color:#fcfbf6; text-align: center;font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33;">'+productCatalog[i].productName
                                                        +'</td><td style="width:10%;  background-color:#fcfbf6;  font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33; text-align: center;"><input type="checkbox" style="background-color:#fcfbf6;" name="chkOccupancy"  class="chkbox" value='+productCatalog[i].productCode+'></td></tr>');  

我嘗試了多種方法...但是所有方法都沒有得到控制。任何人都可以告訴我該怎么做。

Answer 1

試試這個例子：

$(function () {
    $(document).on('change', 'input[name=chkOccupancy]', function (e) {
        var chk = $(this);
        var cnt = $('input[name=chkOccupancy]:checked').length;
        if(3 < cnt) {
            chk.prop('checked', false);
            alert('Not more than 3 !');
        }
        e.stopPropagation();
    });
});

Answer 2

這應該為你工作

$(document).ready(function () {
    $(':checkbox').click(function() {
        if($(':checkbox:checked').length > 3){
            alert('you can not check more than 3 checkboxes');
            $(this).prop('checked',false);
        }
    });
  })

Answer 3

作為替代方案，這是一個非jQuery選項。 您可以將單個偵聽器放在祖先元素（例如div）上，並防止選中第四個復選框：

function checkCBs(e) {
  var el = e.target;
  if (el.type == 'checkbox' && document.querySelectorAll('input:checked').length > 3) {
      el.checked = false;
  }
}

您可能希望限定選擇器以使其保持在div內或用於特定類的輸入。 樣本標記：

<div onclick="checkCBs(event)">
  <label for="cb0">stuff<input type="checkbox" name="cb0" id="cb0">0</label><br>
  <label for="cb1">stuff<input type="checkbox" name="cb1" id="cb1">1</label><br>
  <label for="cb2">stuff<input type="checkbox" name="cb2" id="cb2">2</label><br>
  <label for="cb3">stuff<input type="checkbox" name="cb3" id="cb3">3</label><br>
  <label for="cb4">stuff<input type="checkbox" name="cb4" id="cb4">4</label><br>
</div>