JSFiddle - React, Tailwind, and code Playground

by 6233114

HTML

<input type="checkbox" id="id_remove_photograph" name="remove_photograph" class="checkbox_resize" onchange="remove_photograph_change();" photograph-remove-confirm="{% trans 'Your Photograph will be removed only after you save the form!' %}">Remove Photograph</input>

JavaScript

// START: photograph remove modal code.
        $('a[photograph-remove-confirm]').click(function (ev) {

            //var href = $(this).attr('href');

            if (!$('#photographRemoveConfirmModal').length) {

                $('body').append('<div id="photographRemoveConfirmModal" class="modal modal-confirm-small-width hide fade" role="dialog" aria-labelledby="miscConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="miscConfirmLabel">{% trans "Confirm" %} - {% trans "Remove" %} {% trans "Photograph" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="photographRemoveConfirmOK">{% trans "Remove" %} {% trans "Photograph" %}</a></div></div>');

            }

            $('#photographRemoveConfirmModal').find('.modal-body').text($(this).attr('photograph-remove-confirm'));

            //$('#photographRemoveConfirmOK').attr('href', href);

            $('#photographRemoveConfirmModal').modal({
                show: true
            });

            return false;

        });
        // FINISH: photograph remove modal code.



        function remove_photograph_change() {

            if ($('#id_remove_photograph').is(':checked')) {

                $('#photographRemoveConfirmModal').modal('show')

            }

        }