dimanche 5 avril 2015

display a bootstrap modal if checkbox is checked

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

}

}




Aucun commentaire:

Enregistrer un commentaire