title: check if a checkbox is disabled dynamically and update its label with some class using jquery
body: <p>I have the following jQuery function that replaces checkboxes and radio buttons with images. It is a code I got from <a href="http://www.htmldrive.net/items/show/637/CSS-and-jQuery-Custom-Checkbox-and-Radio-Button-Inputs-Styled" rel="nofollow">htmldrive</a>. Everything is working except the disabled detection part.</p>
  
  <p>The idea is I have four checkboxes where one is exclusive. If the exclusive one is checked, the rest become disabled. So I need to get this disabled property form the disabled ones and update their respective labels with a class "disabled".</p>
  
  <p>Remember <strong>input</strong> here is either a checkbox or radio button, but my main focus here is a checkbox.</p>
  
  <p>The commented code is where I am trying to check if the input is disabled and update its label with a class but it doesn't seem to work. Any help will be appreciated.</p>
  
  <p><strong>UPDATE</strong>
  Below is the function I am using in full</p>
  
  <pre><code>jQuery.fn.customInput = function(){
   $(this).each(function(i){ 
    if($(this).is('[type=checkbox],[type=radio]')){
     var input = $(this);
  
     // get the associated label using the input's id
     var label = $('label[for='+input.attr('id')+']');
  
     //get type, for classname suffix 
     var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
  
     // wrap the input + label in a div 
    $('&lt;div class="custom-'+ inputType +'"&gt;&lt;/div&gt;').insertBefore(input).append(input, label);
  
    // find all inputs in this set using the shared name attribute
    var allInputs = $('input[name='+input.attr('name')+']');
    input.attr('disabled', false);
  
    // necessary for browsers that don't support the :hover pseudo class on labels
    label.hover(
     function(){ 
     $(this).addClass('hover'); 
     if(inputType == 'checkbox' &amp;&amp; input.is(':checked')){ 
      $(this).addClass('checkedHover'); 
     } 
    },
     function(){ $(this).removeClass('hover checkedHover'); }
   );
  
   //bind custom event, trigger it, bind click,focus,blur events     
   input.bind('updateState', function(){ 
     if (input.is(':checked')) {
      if (input.is(':radio')) {    
       allInputs.each(function(){
     $('label[for='+$(this).attr('id')+']').removeClass('checked');
    });  
   };
   label.addClass('checked');
  }
  else { label.removeClass('checked checkedHover checkedFocus'); }
  
  /* if (input.is(':checkbox')  &amp;&amp; input.prop('disabled'))
  {
    label.addClass('disabled');
    label.removeClass('checked');
  } */
  
  })
   .trigger('updateState')
   .click(function(){ 
    $(this).trigger('updateState'); 
   })
   .focus(function(){ 
    label.addClass('focus'); 
    if(inputType == 'checkbox' &amp;&amp; input.is(':checked')){ 
     $(this).addClass('checkedFocus'); 
    } 
   })
   .blur(function(){ label.removeClass('focus checkedFocus'); });
    }
   });
  };
  </code></pre>
  
  <p>And then I instantiate it as follows: </p>
  
  <pre><code>$(document).ready(function(){
      $('input').customInput();
  });
  </code></pre>