JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div class="col-sm-12">
  <div id="item"  data-role="collapsible" data-iconpos="right" data-inset="false" data-mini="true">
    <h3>
      <div class="checkBoxLeft">
        <input type="checkbox" name="check" id="check" class="hidden-checkbox check-item" value="1" />
      </div>
      <span class="checkBoxLeftTitle">18/10 - Quarta</span>
    </h3>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
  </div>
</div>

CSS

.checkBoxLeft {
    float: left;
    position: absolute;
    z-index: 1;
}
span.checkBoxLeftTitle {
    margin: 0 0 0 30px;
}

JavaScript

// [name] is the name of the event "click", "mouseover", .. 
// same as you'd pass it to bind()
// [fn] is the handler function
$.fn.bindFirst = function(name, fn) {
  // bind as you normally would
  // don't want to miss out on any jQuery magic
  this.on(name, fn);

  // Thanks to a comment by @Martin, adding support for
  // namespaced events too.
  this.each(function() {
    var handlers = $._data(this, 'events')[name.split('.')[0]];
    console.log(handlers);
    // take out the handler we just inserted from the end
    var handler = handlers.pop();
    // move it at the beginning
    handlers.splice(0, 0, handler);
  });
};

$(".ui-collapsible-heading").bindFirst('click', function(e) {
  var target = $(e.target);
	if ($(e.target).is('input')) {
    e.stopImmediatePropagation();
    e.stopPropagation();
  }
});