1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <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>
|