JQuery overrides checkbox functionality

I’m making a web app, and one of it’s aspects is a to do list. The problem with the todo list is that when I click the checkbox, it doesn’t get checked. I researched a bit and found that jQuery basically overrides the click event necessary to display the checkbox as checked. However, I’ve tried various solutions throughout the web, yet none seem to resolve the issue of the unchecked checkbox.

I’ve reproduced the problem below:

function updateItemStatus() {
	var me = this; 
	console.log(me);
}

function addNewItem(list,itemText){
	var listItem = document.createElement("li");
	
	var checkBox = document.createElement("input");
	checkBox.type = "checkbox";
	checkBox.onclick = updateItemStatus;
	
	var span = document.createElement("span");
	span.innerText = itemText;
	
	listItem.appendChild(checkBox);
	listItem.appendChild(span);
	
	
	list.appendChild(listItem);
}

//$("input[type="checkbox"]").change(function() {
//if(this.checked) {
//Do stuff
//}
//});


inItemText.onkeyup = function(event) {
	
	
	var totalItems = 0;
	var inItemText = document.getElementById("inItemText");
	var itemText = event.which;
	
	// Event.which (13) = ENTER
	// ONLY proceed if key up = ENTER
	if(event.which == 13){
		var itemText = inItemText.value;
		if (itemText == "" || itemText == " "){
			return false;
		} 
		addNewItem(document.getElementById("todoList"),itemText);	
		
		inItemText.focus();
		inItemText.select();
		
		
		}
	}

body{
	padding:120px;
}

input[type="checkbox"]{   
opacity:1 !important;
}

li span {
	padding:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
	

		
		Press Enter to add an item.
		<p><input type = "text" id = "inItemText" /> </p>
		
		<ul id = "todoList">
			
			</ul>

For reference, here is the link: https://codepen.io/Refath/pen/LdBbQV?editors=1010

Answer

I inspected your code and found that pointer-events: none; is blocking your checkboxes to be clickable / changable.

Add the following line to your css: pointer-events: all;

input[type="checkbox"]{   
    opacity:1 !important;
    pointer-events: all !important;
}

Advertisement

Answer