[英]Disable checkbox after reaching a limit
I'm looking for a native JavaScript Solution that will prevent the user checking more than 2 items by disabling the remaining checkboxes (and enabling them again if the user unchecks one of their options) 我正在寻找一个本机JavaScript解决方案,它将通过禁用其余复选框(并在用户取消选中其选项之一的情况下再次启用它们)来阻止用户检查2个以上的项目
Below are the checkboxes I have in place: 以下是我已有的复选框:
<div class="checkboxdiv">
<input type="hidden" name="Extras" value="">
<input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
<input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
<input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
<input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
<input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>
I am aware this has been covered using JQuery, but I'm looking for a native solution so I can better understand how the code works. 我知道使用JQuery已经解决了这个问题,但是我正在寻找一种本机解决方案,以便可以更好地理解代码的工作原理。
Solution 解
This is the final solution I have come up with, through everyone's help. 这是我在每个人的帮助下提出的最终解决方案。
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup;
var limit=limit;
//Changes onclick funtion for each checkbox
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick= function(){
var checkedcount=0;
//Loops through checkboxes
for (var i=0; i<checkgroup.length; i++){
//adds 1 if checked, 0 if not
checkedcount+=(checkgroup[i].checked)? 1 : 0;
}
//Loops through checkboxes
for (var i=0; i<checkgroup.length; i++){
//Disables check box if it's unchecked and the limit has been reached
if(!checkgroup[i].checked && checkedcount==limit){
checkgroup[i].disabled=true;
}
//Enables all checkboxes otherwise
else{
checkgroup[i].disabled=false;
}
}
}
}
}
Check out the CSS pseudo class ":checked" and document.querySelectorAll . 检出CSS伪类“:checked”和document.querySelectorAll 。
Here is a fiddle to start from: 从这里开始是一个小提琴 :
var currentlyCheckedCount = 0
function disableRemainingCheckboxes() {
Array.from(document.querySelectorAll('input[type="checkbox"]:not(:checked)')).forEach(function(element) {
element.disabled = 'disabled'
})
}
function enableAllCheckboxes() {
Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(element) {
element.disabled = undefined
})
}
Array.from(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
checkbox.addEventListener('change', onCheckboxClick)
})
function onCheckboxClick() {
if(this.checked) {
currentlyCheckedCount++
} else {
currentlyCheckedCount--
}
if(currentlyCheckedCount == 2) {
disableRemainingCheckboxes()
} else {
enableAllCheckboxes()
}
}
Geekonaut answer/code is great, but, if you care about IE support (Array.from() doesn't work in it), here is simplified, more straight-forward version: Geekonaut的答案/代码很棒,但是,如果您关心IE支持(Array.from()在其中不起作用),那么这里是简化的,更直接的版本:
limit = 0; //set limit checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes function checker(elem) { if (elem.checked) { //if checked, increment counter limit++; } else { limit--; //else, decrement counter } for (i = 0; i < checkboxes.length; i++) { // loop through all if (limit == 2) { if (!checkboxes[i].checked) { checkboxes[i].disabled = true; // and disable unchecked checkboxes } } else { //if limit is less than two if (!checkboxes[i].checked) { checkboxes[i].disabled = false; // enable unchecked checkboxes } } } } for (i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = function() { //call function on click and send current element as param checker(this); } }
<div class="checkboxdiv"> <input type="hidden" name="Extras" value=""> <input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/> <input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/> <input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/> <input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/> <input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label> </div>
Code is very clear (easy to understand), i hope, and there are comments, too. 我希望代码非常清晰(易于理解),并且也有注释。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.