{% load material_form_internal %}

<div>
  {% for group, items in form_field|select_options %}
    {% for choice, value, selected in items %}
      <label class="{% if selected %} active{% endif %}">
        <input type="checkbox"
               {% if value == None or value == '' %}disabled{% else %}value="{{ value }}"{% endif %}
                {% if selected %} checked="checked"{% endif %} name="{{ form_field.name }}">
        <span> {{ choice }} </span>
      </label>
    {% endfor %}
  {% endfor %}
</div>

<script>
  $(document).ready(function () {
    $("input[type='checkbox']").each(function () {
      $(this).addClass("chips-checkbox");
      $(this).parent("label").addClass("chips-checkbox");
    });

    $("label.chips-checkbox > span").click(function () {
      $(this).parent("label.chips-checkbox").toggleClass("active");
      let input = $(this).next("input[type='checkbox']");
      input.prop("checked", !input.prop("checked"));
    });
  });
</script>
