Блог

Когда я помещаю свое логическое поле в list_editable, его значок меняется с красивого значка включения / выключения на устаревший флажок. Есть ли способ сохранить поле доступным для редактирования с помощью красивых значков? Я думаю, что я уже делал это, но не могу вспомнить как…

Используйте свой собственный JavaScript, чтобы заменить флажок соответствующим изображением, и используйте события щелчка, чтобы изменить изображение и установить флажок соответствующим образом.

CSS

 .hidden {
    position:absolute;
    left:-99999px;
    width:0;
    height:0;
    overflow:hidden;
}
  

JS

 (function($){
    var on_image = '/static/admin/img/admin/icon-yes.gif';
    var off_image = '/static/admin/img/admin/icon-no.gif';

    $(document).ready(function(){
        var $checkbox = $('.checkbox_field input');
        // Can't simply `hide()` as its value will not be posted
        $checkbox.addClass('hidden');
        var $img = $('<img/>');
        if ($checkbox.attr('checked')) {
            $img.attr('href', on_image);
            $img.attr('alt', 'On');
        } else {
            $img.attr('href', off_image);
            $img.attr('alt', 'Off');
        }
        $img.insertAfter($checkbox);

        $img.click(function(){
            var $img = $(this);
            var $checkbox = $img.siblings('input');

            if ($img.attr('href') == on_image) {
                $img.attr('href', off_image);
                $img.attr('alt', 'Off');
                $checkbox.attr('checked', false);
            } else {
                $img.attr('href', on_image);
                $img.attr('alt', 'On');
                $checkbox.attr('checked', true);
            }
        });
    });
)(django.jQuery);