Как вы создаете Materalise флажок, который выглядит как кнопка

Question

Я использую Materalise UI, и я заинтересован в создании нескольких переключаемых кнопок, как следующее: -

---

---

Я немного искал, но ничего не нашел. Некоторые люди предлагают создать пары <input type="checkbox" ... /> + <label>...</label> и установить флажок незаметно. У меня был взрыв, что он работал очень плохо с Materalise UI.

Возможно, существует гораздо более легкое решение? Любые советы/советы очень ценятся.

Answer 1

Этот скрипт позаботится о проверке флажков и стилизации этикеток. Материализация немного особенная :). Также обратите внимание, что вы хотите удалить .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>