<form class="sui-form">
  <h3>复选框</h3>
  <label class="checkbox-pretty inline checked">
    <input type="checkbox" checked="checked"><span>鸣人</span>
  </label>
  <label class="checkbox-pretty inline">
    <input type="checkbox"><span>佐助</span>
  </label>
  <label class="checkbox-pretty inline">
    <input type="checkbox"><span>我爱罗</span>
  </label>
  <h3>单选框</h3>
  <label class="radio-pretty inline checked">
    <input type="radio" checked="checked" name="radio"><span>服装</span>
  </label>
  <label class="radio-pretty inline">
    <input type="radio" name="radio"><span>电器</span>
  </label>
  <label class="radio-pretty inline">
    <input type="radio" name="radio"><span>美食</span>
  </label>
  <h3>半选</h3>
  <label class="checkbox-pretty inline halfchecked">
    <input type="checkbox"><span>半选</span>
  </label>
  <h3>禁用</h3>
  <label class="checkbox-pretty inline checked disabled">
    <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  </label>
  <label class="radio-pretty inline checked disabled">
    <input type="radio" checked="checked" disabled=""><span>不可选</span>
  </label>
  <h3>只读</h3>
  <p>因为checkbox是不支持readonly状态的，所以通过将label改为span来实现让用户无法操作</p><span class="checkbox-pretty inline checked readonly">
    <input type="checkbox" checked="checked"><span>只读</span></span><span class="radio-pretty inline checked readonly">
    <input type="radio" checked="checked"><span>只读</span></span>
</form>

<form class="sui-form">
  <h3>复选框</h3>
  <label id="checkbox2" class="checkbox-pretty inline checked">
    <input type="checkbox" checked="checked"><span>选项一</span>
  </label>
  <div style="display:block;margin-top: 15px;" class="op sui-btn-group"><a name="check" href="javascript:void(0);" class="sui-btn btn-primary">选中</a><a name="uncheck" href="javascript:void(0);" class="sui-btn btn-primary">取消</a><a name="halfcheck" href="javascript:void(0);" class="sui-btn btn-primary">半选</a><a name="toggle" href="javascript:void(0);" class="sui-btn btn-primary">toggle</a><a name="disable" href="javascript:void(0);" class="sui-btn btn-primary">disable</a><a name="enable" href="javascript:void(0);" class="sui-btn btn-primary">enable</a></div>
</form>
<script>
  var $checkbox = $("#checkbox2").checkbox()
  $(".op").on("click", "a", function(e){
    var $a = $(e.currentTarget);
    $checkbox.checkbox($a.attr("name"))
  })
  
</script>

• 要把checkbox当做一个组件来用，最好不要通过js直接修改input的属性，要通过checkbox api来调用。
• 禁用状态会禁止用户的操作，但是不会禁止通过api来修改状态。
• 半选状态其实就是未选中，所以不会向后台提交。