Task
In short, the code should try to fill up all checkboxes in between a given range, and make it impossible to un-check any checkboxes inside of the range (so, not at the “limits”).
What the code should also do is that if “3” and “6” are selected (and of course those in between), checking “1” should result in “2” being checked automatically.
Bug
The problem is in extending/changing the range after you already did it. The in-range numbers will be 'disabled' but they do not check automatically. I can't figure out where is the problem in my code.
Code
https://jsfiddle.net/o0gskmoL/7/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
var lastChecked = null;
var el = document.getElementsByClassName("list-item-checkbox");
for (var i = 0; i < el.length; i++) {
el[i].addEventListener("click", myFunction);
}
function myFunction() {
if (!lastChecked) {
lastChecked = this;
return;
}
var arr = Array.prototype.slice.call(el);
var from = arr.indexOf(this);
var to = arr.indexOf(lastChecked);
var start = Math.min(from, to);
var end = Math.max(from, to) + 1;
var slicedArr = arr.slice(start, end);
for (var j = 0; j < slicedArr.length; j++) {
slicedArr[j].setAttribute("checked", lastChecked.checked);
}
for (var k = start + 1; k <= end - 2; k++) {
arr[k].disabled = true;
}
if (!arr[start].checked) {
var startPlus = start + 1;
arr[startPlus].disabled = false;
}
var endMinusOne = end - 1;
if (!arr[endMinusOne].checked) {
var endMinusTwo = end - 2;
arr[endMinusTwo].disabled = false;
}
lastChecked = this;
}
};
</script>
</head>
<body>
<ul>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="1">Checkbox 1</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="2">Checkbox 2</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="3">Checkbox 3</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="4">Checkbox 4</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="5">Checkbox 5</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="6">Checkbox 6</label>
</li>
<li>
<label>
<input type="checkbox" class="list-item-checkbox" value="7">Checkbox 7</label>
</li>
</ul>
</body>
</html>
If you know how to solve this, please let me know.
P.S.: I'm restricted to use just pure JS.
Thank you guys.
Aucun commentaire:
Enregistrer un commentaire