rapid-django/src/rapid/templates/rapid/widgets/singleDependent.html

<div id="form-for-{{ name }}">
<style scoped>
    .rapid-dependent{
        border-width: 1px;
        border-radius: 10px;
        border-style: solid;
        padding: 1em;
    }
    .hidden{
        display: none;
    }
    .deleted{
        text-decoration: line-through;
    }
    .included-dependent-checkbox{
        display: none;
    }
</style>
<input type="checkbox" class="included-dependent-checkbox" id="includes_{{ name }}"
       name="includes_{{ name }}"{% if present %} checked{% endif %}>
<div class="rapid-dependent {{ name }} form{% if not present %} hidden{% endif %}">
    {{ form.as_p }}
</div>
<input type="button" value="{% if present %}Remover{% else %}Incluir{% endif %}" class="toggle-remove">
<script>
    $("#includes_{{ name }}").change(function(){
        $("div.{{ name }}.form").toggleClass("hidden");
    });
    $("#form-for-{{ name }} .included-dependent-checkbox").change(function(){
        $(this).parent().toggleClass("deleted");
    });
    $("#form-for-{{ name }} .toggle-remove").click(function(){
        var box = $(this).parent().children(".included-dependent-checkbox");
        var vis = box.prop("checked");
        box.prop("checked", !vis);
        if (vis) {
            $(this).prop("value", "Incluir");
        } else {
            $(this).prop("value", "Remover");
        }
        $("div.{{ name }}.form").toggleClass("hidden");
    });
</script>
</div>