OneCompiler

This code makes 7500 checkboxes

173

// Get the container element where you want to add the checkboxes
const container = document.getElementById("checkboxContainer");
const container2 = document.getElementById("checkboxContainer2");

// Function to handle checkbox click and prevent unchecking
function handleCheckboxClick(index) {
if (index < checkboxes.length - 1) {
checkboxes[index + 1].removeAttribute("disabled");
}
}

function handleCheckboxClick2(event) {
const checkbox = event.target;

if (!checkbox.checked) {
event.preventDefault(); // Prevent the click event from changing the checkbox state
}
}

// Create an array to keep track of the checkboxes
var checkboxes = [];
var checkboxes2 = [];

// Loop to create and add 250 checkboxes
for (var i = 1; i <= 7500; i++) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox" + i;
checkbox.addEventListener("click", function () {
handleCheckboxClick(checkboxes.indexOf(this));
});

var label = document.createElement("label");
label.htmlFor = "checkbox" + i;
label.appendChild(document.createTextNode("Checkbox " + i));

if (i > 1) {
checkbox.setAttribute("disabled", "disabled");
}

container.appendChild(checkbox);
container.appendChild(label);

checkboxes.push(checkbox);
if (i < 7500) {
container.removeChild(label)
}
}

// Loop to create and add 3 checkboxes with the unchecking prevention behavior
for (var i = 1; i <= 3; i++) {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox2_" + i;
checkbox.addEventListener("click", function () {
handleCheckboxClick2(this);
});

var label = document.createElement("label");
label.htmlFor = "checkbox2_" + i;
label.appendChild(document.createTextNode("Checkbox 2_" + i));

container2.appendChild(checkbox);
container2.appendChild(label);
}