Question

我正在制作一个网络应用，其中一个方面是待办事项列表。待办事项列表的问题是，当我单击复选框时，它不会被检查。我研究了一下，发现jQuery基本上覆盖了显示复选框所需的点击事件。但是，我在整个网络上尝试了各种解决方案，但似乎都没有解决未选中复选框的问题。

我已经重现了以下问题：

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>

供参考，以下是链接：https://codepen.io/Refath/pen/LdBbQV?editors=1010

Answer 1

我检查了您的代码，发现pointer-events: none;阻止您的复选框可点击/变换。

将以下行添加到css：pointer-events: all;

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

Answer 2

它与jQuery无关，它是你的页面的两个其他方面，每个都独立地导致了这个：

Materialise有一条明确禁止点击复选框的规则：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

pointer-events: none表示不会获得点击次数。

删除Materialize后，提供span填充的规则会使span与复选框重叠，因此我们最终会点击范围，而不是复选框。

如果我删除了materialize和你的填充规则，它就解决了这个问题：

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>

据推测，有一些示例说明如何在其网站上使用Materialize正确呈现可用的复选框;我从来没有用过它。

JQuery覆盖复选框功能

2 个答案: