X-editable and Bootstrap Using Image field To Trigger Select

You can use icons in an interface to trigger a select popup with X-editable and Bootstrap and replace the text content with an image.

HTML:

<p>X-editable: single reqular checkbox</p>
<div style="margin: 150px">
    <img id="check" src="http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png"/>
</div>

JS:

$('#check').editable({
    type: 'checklist',
    url: '/post',    
    pk: 1, 
    placement: 'right',
    title: 'Option 1',
    source: {'1': 'enabled'},
    emptytext: 'disabled',
    success: function(data, config) {
        if(data = '1'){
            $("#check").attr("src", "http://png-2.findicons.com/files/icons/808/on_stage/128/symbol_check.png");
        }else{
            $("#check").attr("src", "http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png");
        }
    }
});

Demo

Source: http://stackoverflow.com/a/16878660