display a bootstrap modal if checkbox is checked

user1261774

I have a test page that when a user clicks on a form button, a bootstrap modal appears and displays a yes/no message to the user. It seems to be working OK.

However, I have been trying to change the code so that the bootstrap modal is displayed / triggered when the user checks a checkbox, but I am having trouble understanding the code I have.

I am hoping someone can show me how to adapt my code so the checked checkbox triggers the modal display.

Here is the script code that I have

<script>
    // 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.
</script>

Here is the template button code that displays the modal when clicked:

<a href="#" id="test_button" class="btn" photograph-remove-confirm="Your Photograph will be removed only after you save the form!">{% trans "Test" %}</a>

Here is the template checkbox code that I want to use to trigger the modal:

<input type="checkbox" id="id_remove_photograph" name="remove_photograph" class="checkbox_resize"  onchange="remove_photograph_change();"> Remove Photograph</input>

Here is the onchange="remove_photograph_change" function displayed in the checkbox above.

function remove_photograph_change() {

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

        // just some code

    }

}
user3354539

I think that the following changes will fix the issue you have.

Change your checkbox code to this:

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

Change your modal code to this:

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

        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'));

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

        return false;

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Bootstrap checkbox in modal remain checked after closing and reopen again

From Dev

Get and display checked checkbox index

From Dev

display button when checkbox is checked

From Dev

Jquery if checkbox is checked Bootstrap switch

From Dev

get value of a checked bootstrap checkbox

From Dev

Listen to bootstrap checkbox being checked

From Dev

Display error if no checkbox is checked in checkbox group

From Dev

Display error if no checkbox is checked in checkbox group

From Dev

Display combo box when checkbox is checked - Extjs

From Dev

How to display the toast meassage only if checkbox is checked?

From Dev

Display checkbox checked or not based on mysql table value

From Dev

How to display the toast meassage only if checkbox is checked?

From Dev

Checkbox have to display in the TABLE YES/NO if it's checked or not

From Dev

Display specific Column when checkbox is checked

From Dev

Display a list only when a checkbox is checked

From Dev

textbox display needed when checkbox checked

From Dev

Twitter Bootstrap 3 collapse when checkbox checked

From Dev

bootstrap dismiss modal and display another modal

From Dev

How to display an Alert in Bootstrap Modal

From Dev

failing to display bootstrap UI Modal

From Dev

Display This Bootstrap Modal on Page Load

From Dev

Close Modal after Submit button / Count all the values of checked checkbox

From Dev

How to get value checkbox on modal bootstrap

From Dev

jQuery checkbox validation not working inside bootstrap modal

From Dev

Add a confirm bootstrap modal/dialog to checkbox

From Dev

javascript checkbox - uncheck only on bootstrap modal OK

From Dev

Checkbox not checked

From Dev

How to get checkbox to display checked/unchecked status in AngularJS?

From Dev

XSL checkbox display checked if value is 1 from database

Related Related

  1. 1

    Bootstrap checkbox in modal remain checked after closing and reopen again

  2. 2

    Get and display checked checkbox index

  3. 3

    display button when checkbox is checked

  4. 4

    Jquery if checkbox is checked Bootstrap switch

  5. 5

    get value of a checked bootstrap checkbox

  6. 6

    Listen to bootstrap checkbox being checked

  7. 7

    Display error if no checkbox is checked in checkbox group

  8. 8

    Display error if no checkbox is checked in checkbox group

  9. 9

    Display combo box when checkbox is checked - Extjs

  10. 10

    How to display the toast meassage only if checkbox is checked?

  11. 11

    Display checkbox checked or not based on mysql table value

  12. 12

    How to display the toast meassage only if checkbox is checked?

  13. 13

    Checkbox have to display in the TABLE YES/NO if it's checked or not

  14. 14

    Display specific Column when checkbox is checked

  15. 15

    Display a list only when a checkbox is checked

  16. 16

    textbox display needed when checkbox checked

  17. 17

    Twitter Bootstrap 3 collapse when checkbox checked

  18. 18

    bootstrap dismiss modal and display another modal

  19. 19

    How to display an Alert in Bootstrap Modal

  20. 20

    failing to display bootstrap UI Modal

  21. 21

    Display This Bootstrap Modal on Page Load

  22. 22

    Close Modal after Submit button / Count all the values of checked checkbox

  23. 23

    How to get value checkbox on modal bootstrap

  24. 24

    jQuery checkbox validation not working inside bootstrap modal

  25. 25

    Add a confirm bootstrap modal/dialog to checkbox

  26. 26

    javascript checkbox - uncheck only on bootstrap modal OK

  27. 27

    Checkbox not checked

  28. 28

    How to get checkbox to display checked/unchecked status in AngularJS?

  29. 29

    XSL checkbox display checked if value is 1 from database

HotTag

Archive