无法在样式化后点击复选框

Question

无法在样式化后点击复选框

3

我尝试过对一些复选框进行样式设置，但现在无法点击/激活/勾选它们。通常以相同方式进行样式设置的单选按钮可以正常工作。

$(document).ready(function() {
 var $selection = $('.sc-checkbox');

 $selection.each(function() {
  var $this = $(this),
      $id = $this.attr('id');

  $this.after( '<label for="' + $id + '"></label>' );
 });
});

input[type="checkbox"].sc-checkbox {
    -webkit-opacity: 0;
    opacity: 0;
    left: -102%;
    position: absolute
}
input[type="checkbox"].sc-checkbox+label{
  padding: 0 5px 0 10px;
}
input[type="checkbox"].sc-checkbox+label:before {
    content: '';
    display: inline-block;
    background: transparent;
    border: .14286rem solid rgba(0, 0, 0, 0.54);
    width: .92857rem;
    height: .92857rem;
    border-radius: .14286rem;
    font-family: 'Material Icons';
    position: relative;
    vertical-align: middle;
    left: 0;
    line-height: .92857rem;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

input[type="checkbox"].sc-checkbox:checked+label:before {
    background: #3f51b5;
    border: .14286rem solid #3f51b5;
    content: '\E5CA';
    color: #fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<input type="checkbox" class="sc-checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="sc-checkbox" id="test1" checked></label><label for="test1">Test1</label>

当你运行这个示例时一切正常，但在我的网站上它却无法工作。我已经在:before上尝试了位置、填充和边距的调整，但似乎没有什么作用。我希望有人能帮我让复选框重新工作。先谢谢了。

- SuperDJ

在你的HTML的最后两行，你结束了一个</label>标签，却从未打开过它，然后又打开了一个<label>标签，只是为了稍后关闭它。第一个</label>是意外的吗？ - Xetnus

看起来你的网站缺少jQuery CDN链接。 - Michael Benjamin

@Xetnus 是的，第一个</label>是一个意外。 - SuperDJ

1

@Michael_B 我有jQuery，它在vendor.min.js文件中。 - SuperDJ

该网站无法访问？ - itzmukeshy7

@itzmukeshy7 你应该可以。但是由于问题已经得到解答，我删除了链接。答案提供了有问题的代码，我不想在我的网站上做“广告”。 - SuperDJ

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dekel · Accepted Answer

你有一段代码，可以在标签被点击时修复文本字段没有被选择的错误：

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');
});

然而，这段代码会导致标签上的 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');
});