CODEWITHSUNDEEP
jquerycheckbox
Maurice
Maurice

Reputation: 127

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

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();
});

Upvotes: 2

Views: 8021

Answers (2)

Sora
Sora

Reputation: 2551

try : 

if (input.is(':checkbox')  && input.attr("disabled") )
{
 label.addClass('disabled');
 label.removeClass('checked');
}

Upvotes: 0

SNAG
SNAG

Reputation: 2113

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

Upvotes: 3

Related Questions