1

我有以下 jQuery 函数，它用图像替换复选框和单选按钮。这是我从htmldrive获得的代码。除了禁用的检测部分外，一切正常。

这个想法是我有四个复选框，其中一个是独占的。如果选中了独占的，则其余的将被禁用。所以我需要从禁用的属性中获取这个禁用的属性，并使用“禁用”类更新它们各自的标签。

请记住，此处的输入是复选框或单选按钮，但我主要关注的是复选框。

注释代码是我试图检查输入是否被禁用并使用类更新其标签但它似乎不起作用的地方。任何帮助将不胜感激。

更新 以下是我完整使用的功能

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

然后我将它实例化如下：

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

2 回答 2

1

您使用的 JQuery 版本将决定您是使用 prop 还是 attr。

你可以用这个

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

检查这个小提琴

于 2012-09-03T07:40:48.363 回答
0

尝试 ：

if (input.is(':checkbox')  && input.attr("disabled") )
{
 label.addClass('disabled');
 label.removeClass('checked');
}
于 2012-09-03T07:20:49.117 回答