check if a checkbox is disabled dynamically and update its label with some class using jquery

Question

I have the following jQuery function that replaces checkboxes and radio buttons with images. It is a code I got from htmldrive. Everything is working except the disabled detection part.

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".

Remember input here is either a checkbox or radio button, but my main focus here is a checkbox.

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.

UPDATE Below is the function I am using in full

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 
  $('<div class="custom-'+ inputType +'"></div>').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' && 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')  && input.prop('disabled'))
{
  label.addClass('disabled');
  label.removeClass('checked');
} */

})
 .trigger('updateState')
 .click(function(){ 
  $(this).trigger('updateState'); 
 })
 .focus(function(){ 
  label.addClass('focus'); 
  if(inputType == 'checkbox' && input.is(':checked')){ 
   $(this).addClass('checkedFocus'); 
  } 
 })
 .blur(function(){ label.removeClass('focus checkedFocus'); });
  }
 });
};

And then I instantiate it as follows:

$(document).ready(function(){
    $('input').customInput();
});

Can you post a simple demo of this code in action, with the relevant HTML, at JS Fiddle (or similar)? — David Thomas
How do you set the input and label variables? Are they for the "exclusive" checkbox? They must be jQuery objects if you're using jQuery methods on them (.bind(), etc.), but if they're jQuery objects containing more than one element then your code doesn't make sense. — nnnnnn

SNAG SNAG · Accepted Answer · 2012-09-03T07:40:48

The version of JQuery you are using will dictate if you use prop or attr.

you can use this

if(!$(this).prop('disabled'))

Check this Fiddle

check if a checkbox is disabled dynamically and update its label with some class using jquery

2 Answers