无法使用 iCheck 选择复选框 - HTML Checkbox

Question

我购买了一个股票图像脚本，但登录屏幕出现问题。有一个带有复选框的“记住我”选项。不幸的是，无法单击该复选框，只有当您单击该字符串时，它才会勾选该框。我发现编码器使用 icheck 创建按钮，但我不确定为什么您无法勾选复选框。

这里是来源：

<div class="row margin-bottom-15">
    <div class="col-xs-7">
        <div class="checkbox icheck margin-zero">
            <label class="margin-zero">
                <input @if( old('remember') ) checked="checked" @endif id="keep_login" class="no-show" name="remember" type="checkbox" value="1">
                <span class="keep-login-title">{{ trans('auth.remember_me') }}</span>
        </label>
    </div>
</div>

Javascript 部分

<script src="{{ asset('public/plugins/iCheck/icheck.min.js') }}"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-red',
        radioClass: 'iradio_square-red',
        increaseArea: '20%' // optional
      });
    });
</script>

这是一个现场示例中的站点：http://gostock.miguelvasquez.net/login 有人知道如何解决这个问题吗？

Answer 1

我要看看你的 iCheck 函数，同时你可以用 css 破解你的问题：

.keep-login-title{
  position: absolute;
  left: 0;
  top: 50%;
  padding-left: 26px;
  transform: translate(0, -50%);
  white-space: nowrap; 
}

好吧，iCheck 工作正常，你的问题纯粹是 css，你的输入有错误，它不应该在你的主复选框前面绘制，它会重定向每个用户的操作，例如 onClick 事件：

只需添加：

//you already have a .no-show class, i guess the author only forget the z-index 'thing'
.no-show{
  z-index: -1
}

如果您想了解更多关于z-index的信息