如果选中复选框，则显示引导模式答案

【问题标题】：display a bootstrap modal if checkbox is checked如果选中复选框，则显示引导模式
【发布时间】：2015-04-06 14:33:44
【问题描述】：

我有一个测试页面，当用户单击表单按钮时，会出现引导模式并向用户显示是/否消息。它似乎工作正常。

但是，我一直在尝试更改代码，以便在用户选中复选框时显示/触发引导模式，但我无法理解我的代码。

我希望有人可以告诉我如何调整我的代码，以便选中的复选框触发模态显示。

这是我的脚本代码

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

这是点击时显示模态的模板按钮代码：

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

这是我想用来触发模态的模板复选框代码：

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

这是上面复选框中显示的onchange="remove_photograph_change"函数。

function remove_photograph_change() {

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

        // just some code

    }

}

【问题讨论】：

点击此链接getbootstrap.com/javascript/#modals并使用$('#CheckBox').change();
这样的？- jsfiddle.net/r0ao44e7
Manoz，是的，功能相同 - 但在查看您的示例代码并尝试模仿代码后，我无法让我的代码以相同的方式运行。我也在使用 Bootrap 版本 2。
@user1261774，当我知道什么不起作用时，你能为此做一个小提琴吗？
Manoz，小提琴是：[link]jsfiddle.net/juhbay2r/[link]。我认为问题是模态代码的$('a[photograph-remove-confirm]').click(function(ev) {。此外，这是我制作的第一个小提琴 - 如果有错误，请原谅我。

标签： javascript jquery twitter-bootstrap checkbox bootstrap-modal

【解决方案1】：

我认为以下更改将解决您遇到的问题。

将您的复选框代码更改为：

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

将您的模式代码更改为：

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

【讨论】：