如何创建一个看起来像按钮的Materalise复选框

Question

我正在使用Materalise UI，我有兴趣创建一些如下所示的切换按钮： -

我做了一些谷歌搜索但没有发现任何东西。有些人建议创建clean_email + <input type="checkbox" ... />对，并使复选框不可见。我对Materalise UI的工作非常糟糕。

也许有一个更简单的解决方案？非常感谢任何提示/建议。

Answer 1

此脚本负责检查复选框和样式标签。 Materialise有点特别:)。另请注意，您要从页面初始呈现的.btn-flat复选框的任何标签中删除:checked（如果您默认选中某些标签或基于用户数据）。

$('label.btn').on('click','input', function(e){
  e.stopPropagation();
  $(this).attr('checked', !$(this).attr('checked'));
  $(e.target).closest('label').toggleClass('btn-flat');
});

label.btn:not(.btn-flat) { 
  background-color: #35DDE0;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>

<label class="waves-effect waves-light btn btn-flat">
  <input type="checkbox" name="countries[]" value="african" />African</label>
<label class="waves-effect waves-light btn btn-flat">
  <input type="checkbox" name="countries[]" value="british" />British</label>
<label class="waves-effect waves-light btn btn-flat">
  <input type="checkbox" name="countries[]" value="french" />French</label>
<label class="waves-effect waves-light btn btn-flat">
  <input type="checkbox" name="countries[]" value="german" />German</label>