Question

我试图设置一些复选框，但现在我无法点击/激活/检查它们。主要采用相同方式设置的单选按钮可以正常工作。

＆＃13;

$(document).ready(function() {
	var $selection = $('.sc-checkbox');

	$selection.each(function() {
		var $this = $(this),
		    $id = $this.attr('id');

		$this.after( '<label for="' + $id + '"></label>' );
	});
});

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

当您运行示例时一切正常但在我的网站上它不起作用。我在:before上摆弄了位置，填充和边距，但似乎没有任何效果。

我希望有人能帮助我让复选框再次运作。

提前致谢。

Answer 1

您有一个代码可以在单击标签时选择文本字段时修复错误：

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

样式化后无法单击复选框

1 个答案: