如果複選框被選中，顯示引導模式

Question

我有一個測試頁面，當用戶單擊表單按鈕時，引導模式出現並向用戶顯示是/否消息。它似乎工作正常。

但是，我一直在嘗試更改代碼，以便在用戶選中複選框時顯示/觸發引導模式，但我無法理解我的代碼。

我希望有人能告訴我如何調整我的代碼，所以選中的複選框會觸發模態顯示。

這裏是腳本代碼，我有

<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"有趣ction顯示在上面的複選框中。

function remove_photograph_change() { 

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

     // just some code 

    } 

} 

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