复选框选择的限制

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>