title: style for checkboxes with formidable plugin
body: <p>I'm trying to make custom style for checkboxes using CSS/JS</p>
  
  <p>This is currently located at <a href="http://www.fb-navigatio.com/markersparebank2/" rel="nofollow">http://www.fb-navigatio.com/markersparebank2/</a>.</p>
  
  <p>I created the style for checkbox:</p>
  
  <pre><code>.frm_checkbox label input{
      display:none;   
  }
  .frm_checkbox label {
      background: url("images/check_sprite.png") no-repeat scroll 0 0;
      padding: 4px 0 8px 42px;
      position:relative;
      z-index:100;
      cursor:pointer;
  }
  .frm_checkbox label:hover {
      background: url("images/check_sprite.png") no-repeat scroll 0 -40px;
  }
  .frm_checkbox label.checked{
      background: url("images/check_sprite.png") no-repeat scroll 0 -80px;    
  }
  </code></pre>
  
  <p>Here is the JS code:</p>
  
  <pre><code>jQuery(document).ready(function($){
      var tmp = [];
      $('input:checkbox').each(function(index){
          tmp[index] = '';
      })
      $('.frm_checkbox label').click(function(index){
  
          if(tmp[index] == ''){
              $(this).addClass('checked');
              $(this).find('input:checkbox').addAttr('checked');
              console.log(tmp[index]);
          }else if(tmp[index] =='1') {
              tmp[index] = '0';
              $(this).removeClass('checked');
              $(this).find('input').removeAttr('checked');
              console.log(tmp[index]);
          }
          //var $checkbox = $(this).find(':checkbox');
          //$checkbox.attr('checked', !$checkbox.is(':checked'));
          //alert();
      });
  });
  </code></pre>
  
  <p>The problem is that the checkboxes do not work. Clicking on a checkbox does not seem to check it.</p>