JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<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>
JavaScript
$('#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");
}
}
});
var a=0;
//ajax emulation. Type "err" to see error message
$.mockjax({
url: '/post',
responseTime: 400,
response: function(settings) {
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else if(settings.data.value[0] == '1') {
this.responseText = '1';
}else{
this.responseText = '0';
}
}
});