如何創建一個Materalise複選框，它看起來像一個按鈕

Question

我使用Materalise UI和我感興趣的是創造了多項切換按鈕類似如下： -

---

---

我做了一些谷歌搜索，但沒有發現任何東西。有人建議創建<input type="checkbox" ... /> + <label>...</label>對，並使該複選框不可見。我有一個驚喜，它與Materalise UI非常不匹配。

也許有一個更簡單的解決方案？任何提示/建議非常感謝。

Answer 1

此腳本負責檢查複選框併爲標籤設計樣式。 Materialise有點特別:)。另外請注意，您希望從頁面初始渲染時的:checked複選框的任意標籤中刪除.btn-flat（如果您有一些標籤默認選中或基於用戶數據進行檢查）。

$('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>