複選框選擇的限制

Question

美好的一天！我目前有這個代碼，但它不起作用，即使我將其限制爲最多選擇2個項目，我仍然可以選擇多於2個。下面是代碼：

$(document).ready(function() { 
 
    var limit = 2; 
 
    
 
    $('input.single-checkbox').on('change', function(evt) { 
 
    if ($(this).siblings(':checked').length >= limit) { 
 
     this.checked = false; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label>Available Books</label> 
 
    <div> 
 
    <label> 
 
     <?php foreach($collections as $collection):?> 
 
     <input type="checkbox" id="blankCheckbox" class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled':'')?> name='accession_no[]' value='<?php echo $collection->id ?>' aria-label="..."> 
 
     &nbsp; 
 
     <?php echo $collection->title ?> - <?php echo $collection->author ?><br /> 
 
     <?php endforeach;?> 
 
    </label> 
 
    </div> 
 
</div>

Answer 1

首先注意你的PHP代碼將生成的HTML是無效的。你有id屬性將被複制，而且label元素需要包裝每個個人<input>，而不是所有的人。這裏有一個固定的版本：

<?php foreach($collections as $collection):?> 
    <label> 
    <input type="checkbox" class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled': '')?> name="accession_no[]" value="<?php echo $collection->id ?>" aria-label="..."> 
    &nbsp; 
    <?php echo $collection->title ?> - <?php echo $collection->author ?><br /> 
    </label> 
<?php endforeach;?> 

與限制邏輯現在的問題是，該複選框元素是不是彼此的兄弟姐妹，因此您的siblings()使用會始終返回0元素的長度。要解決此問題，請直接與:checked選擇器一起按類別選擇元素。另請注意，要選擇最高限額，支票應使用>，而不是>=。試試這個：

$(document).ready(function() { 
 
    var limit = 2; 
 
    
 
    $('.single-checkbox').on('change', function(evt) { 
 
    if ($('.single-checkbox:checked').length > limit) { 
 
     this.checked = false; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label>Available Books</label> 
 
    <div> 
 
    <label> 
 
     <input type="checkbox" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
 
     &nbsp; 
 
     Title #1 - Author #1<br /> 
 
    </label> 
 
    
 
    <label> 
 
     <input type="checkbox" class="single-checkbox" name='accession_no[]' value='2' aria-label="..."> 
 
     &nbsp; 
 
     Title #2 - Author #2<br /> 
 
    </label> 
 
    
 
    <label> 
 
     <input type="checkbox" class="single-checkbox" name='accession_no[]' value='3' aria-label="..."> 
 
     &nbsp; 
 
     Title #3 - Author #3<br /> 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

參照本link Fiddle，你可以找到一種方法來限制選擇的複選框的數量，如果這是你要搜索的內容

var limit = 2; 
$('input.single-checkbox').on('change', function(evt) { 
    if($(this).siblings(':checked').length >= limit) { 
     this.checked = false; 
    } 
}); 

Answer 3

檢查這個代碼

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-group"> 
<label>Available Books</label> 
<div> 
<label> 

    <input type="checkbox" id="blankCheckbox" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
    <input type="checkbox" id="blankCheckbox2" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
    <input type="checkbox" id="blankCheckbox3" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
    <input type="checkbox" id="blankCheckbox4" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
    <input type="checkbox" id="blankCheckbox5" class="single-checkbox" name='accession_no[]' value='1' aria-label="..."> 
    &nbsp; 

</label> 
</div> 
</div> 

和這是你原來的代碼

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-group"> 
<label>Available Books</label> 
<div> 
<?php 
$i = 0; 
foreach($collections as $collection): 
    $i++; 
    ?> 
    <input type="checkbox" id="blankCheckbox_<?=$i?>" class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled':'')?> name="accession_no[]" value="<?php echo $collection->id ?>" aria-label="..."> 
    &nbsp; 
    <?php echo $collection->title ?> - <?php echo $collection->author ?><br /> 
    <?php endforeach;?> 
    </div> 
    </div> 

添加以下代碼波紋管

<script> 
$(document).ready(function() { 
var limit = 2; 

$('input.single-checkbox').on('change', function(evt) { 
if ($(this).siblings(':checked').length >= limit) { 
    this.checked = false; 
} 
}); 
}); 
</script>