JSFiddle - React, Tailwind, and code Playground

by Snippet

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>
<div><a href="javascript:;" id="messBtn">Test</a></div>

<div id="myInbox" class="modal hide fade" data-toggle="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ă—</button>
    <h3 id="myModalLabel">Test Box</h3>
 
   
  </div>
  <div class="modal-body"> 
	<h4>test </h4>
   
    <br class="clear" />
    <form action="{$liveSite}" name="messagesForm" id="messagesForm" onsubmit="return false;">
	  
					<div class="well" >
						<div class="media" id="{$message.msgId}">
						  <span class="checkInp pull-left" ><input type="checkbox" name="msgId[]" value="{$message.msgId}" /><- this is not working. Click me im working! But Why is the checkbox not working</span>
						   
		 
				 
 
    </form>
  
 

<form enctype="multipart/form-data" action="" method="post" name="paramsMsg" id="paramsMsg" onsubmit="return false">
    <input type="hidden" name="page" id="page" value="{$page}" />
</form>
	 <br/>			
  </div> 
  </div>

JavaScript

var documentBody  = $(document.body);  
documentBody.on('click','#messBtn',null,function() {
      $('#myInbox').modal();
   });


	documentBody.on('click','.checkInp',null,function(e) { 
        var checkbox = $(this).find(":checkbox"),
        checked = checkbox.is(":checked"); 
        checkbox.prop("checked", !checked);

    });
	   
	documentBody.on('click','.checkInp :checkbox',null,function(e) { 
      $(this).parent('span').trigger('click');
	 
    });