Css 设置样式后无法单击复选框

我曾尝试设置一些复选框的样式，但现在我无法单击/激活/选中它们。大多数样式相同的单选按钮都可以工作

$（文档）.ready（函数（）{
变量$selection=$（'.sc复选框'）；
$selection.each（函数（）{
变量$this=$（this），
$id=$this.attr（'id'）；
$this.after（“”）；
});
});
输入[type=“checkbox”].sc复选框{
-webkit不透明度：0；
不透明度：0；
左-102%；
位置：绝对位置
}
输入[type=“checkbox”].sc复选框+标签{
填充：0 5px 0 10px；
}
输入[type=“checkbox”]。sc复选框+标签：在{
内容：''；
显示：内联块；
背景：透明；
边框：.14286rem实心rgba（0,0,0,0.54）；
宽度：.92857rem；
高度：.92857雷姆；
边界半径：.14286rem；
字体系列：“材质图标”；
位置：相对位置；
垂直对齐：中间对齐；
左：0；
线高：.92857rem；
-webkit转换：所有300ms三次贝塞尔（0.4,0,0.2,1）；
过渡：所有300ms三次贝塞尔（0.4,0,0.2,1）
}
输入[type=“checkbox”]。sc复选框：选中+标签：之前{
背景#3f51b5；
边框：.14286rem实心#3f51b5；
内容：'\E5CA'；
颜色：#fff
}

试验
Test1
当单击标签时未选择文本字段时，您有一个修复错误的代码：

textfields.js，第30行：

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');
    $('#'+$id).trigger('click');
});

但是，此代码会导致标签上的
单击
被触发两次，因此您会在复选框上单击两次（这会导致您的复选框被选中，然后立即取消选中，或者相反）

我不确定您是否真的需要此代码，但您可以将修复错误更改为以下内容：

// Fix bug that text field isn't selected when label is clicked
$('label').click(function() {
    var $id = $(this).attr('for');
    if ($('#'+$id).is(':checkbox')) {
        return;
    }
    $('#'+$id).trigger('click');
});

在HTML的最后两行中，您结束了一个
标记，但从未打开过一个，然后打开一个
标记，稍后再关闭它。第一个
是偶然的吗？看起来您的网站上缺少jQuery CDN链接。@Xetnus是的，第一个是accident@Michael_B我有jQuery，它就在vendor.min.js中。这个网站无法访问？我需要那段代码，因为出于某种原因，当单击文本字段的标签或输入时，文本字段并不总是挑选出来的。那段代码被修复了。我想知道你是如何发现这个bug的，你在github上挖掘过代码吗？找到它确实有点棘手：）我查看了
标签
，看看是否有任何事件受到攻击，我注意到有一个
keyup
事件附加在那里。然后我查看了您的js文件，看看是哪个文件导致了该特定事件的附加，然后花了一些调试时间来查看当您单击
标签时会发生什么。