title: How to apply css on checkbox when it's getting disabled?
body: <p>I have two chech Boxes (one of them disabled). I have replaced the check boxes with a div with background color with toggle function so that checked = green, unchecked = red.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="checkbox" class="input_class_checkbox" disabled="disabled"&gt;    
  &lt;br/&gt;
  &lt;input type="checkbox" class="input_class_checkbox"&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.input_class_checkbox').each(function(){
  $(this).hide().after('&lt;div class="class_checkbox" /&gt;');
  
  });
  
  $('.class_checkbox').on('click',function(){
  $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.class_checkbox {
  width: 20px;  
  height: 20px;
  background-color: red;
  }
  
  .class_checkbox.checked {
    background-color: green;
  }
  
   .class_checkbox.disabled {
    background-color: blue;
  }
  </code></pre>
  
  <p>How do I apply this <code>.disabled</code> CSS on the disabled check box on page load? also check boxes can be disabled programmatically, so can I implement <code>onDisabled</code> kind of Jquery code to change the appearance when a check box is disabled?</p>